﻿<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Electronics Store - Shoplook Multipurpose eCommerce Bootstrap5 Html Template</title>
    <meta name="description" content="description">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.png}"/>
    <!-- Plugins CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">
    <!-- Main Style CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <link rel="stylesheet" th:href="@{/assets/css/responsive.css}">
</head>

<body class="template-index index-demo1">
<!--Pre-Loader-->
<div id="pre-loader" class="preloader">
    <div class="preloader-in h2">
        <span>S</span><span>H</span><span>O</span><span>P</span><span>L</span><span>O</span><span>O</span><span>K</span>
    </div>
</div>
<!--End Pre-Loader-->

<!--Page Wrapper-->
<div class="page-wrapper">
    <!--引入片段-->
    <div th:replace="~{include_header::header}"></div>

    <!--Page Content-->
    <div id="page-content">
        <!--Home slider-->
        <div class="slideshow slideshow-wrapper">
            <div class="home-slideshow">
                <div class="slide">
                    <div class="blur-up lazyload">
                        <img class="blur-up lazyload" data-src="assets/images/slideshow-banner/e-demo1-banner3.jpg"
                             src="assets/images/slideshow-banner/e-demo1-banner3.jpg"
                             alt="Find Your Perfect Store with Shoplook" title="Find Your Perfect Store with Shoplook"/>
                        <div class="slideshow__text-wrap slideshow__overlay center container">
                            <div class="slideshow__text-content">
                                <div class="wrap-caption anim-tru center style1">
                                    <p class="mega-small-title"><b>ARE YOU READY?</b></p>
                                    <h2 class="h1 mega-title slideshow__title">Find Your Perfect Store with
                                        Shoplook</h2>
                                    <span class="mega-subtitle slideshow__subtitle">The wonderful world of home appliances now makes it possible to cook indoors with charcoal and outdoors with gas.</span>
                                    <a href="shop-left-sidebar.html" class="btn">Shop now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slide">
                    <div class="blur-up lazyload">
                        <img class="blur-up lazyload" data-src="assets/images/slideshow-banner/e-demo1-banner2.jpg"
                             src="assets/images/slideshow-banner/e-demo1-banner2.jpg" alt="eCommerce HTML Template"
                             title="eCommerce HTML Template"/>
                        <div class="slideshow__text-wrap slideshow__overlay left container">
                            <div class="slideshow__text-content">
                                <div class="wrap-caption anim-tru left style1">
                                    <h2 class="h1 mega-title slideshow__title">eCommerce HTML Template</h2>
                                    <span class="mega-subtitle slideshow__subtitle">Multipurpose eCommerce Bootstrap HTML5 Template</span>
                                    <a href="shop-left-sidebar.html" class="btn">Shop now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slide">
                    <div class="blur-up lazyload">
                        <img class="blur-up lazyload" data-src="assets/images/slideshow-banner/e-demo1-banner1.jpg"
                             src="assets/images/slideshow-banner/e-demo1-banner1.jpg"
                             alt="Fully customisable &amp; Easy to modify"
                             title="Fully customisable &amp; Easy to modify"/>
                        <div class="slideshow__text-wrap slideshow__overlay right container">
                            <div class="slideshow__text-content">
                                <div class="wrap-caption anim-tru right style1">
                                    <h2 class="h1 mega-title slideshow__title">Fully customisable &amp; Easy to
                                        modify</h2>
                                    <span class="mega-subtitle slideshow__subtitle">Perfect website solution for your online store</span>
                                    <a href="shop-left-sidebar.html" class="btn">Shop now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End Home slider-->

        <!--Image Banner-->
        <div class="section imgBanners style2">
            <div class="container">
                <div class="collection-banners">
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-6 col-lg-6 img-banner-item">
                            <div class="imgBanner-grid-item">
                                <div class="inner btmleft">
                                    <a href="shop-left-sidebar.html">
                                                <span class="img">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/collection-banner/demo1-cl-banner1.jpg"
                                                         src="assets/images/collection-banner/demo1-cl-banner1.jpg"
                                                         alt="" title=" "/>
                                                </span>
                                        <span class="ttl head-font"><span
                                                class="tt-small">Mobile &amp; Tablet</span></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-12 col-md-6 col-lg-6 img-banner-item">
                            <div class="row">
                                <div class="col-12 col-sm-6 col-md-6 col-lg-6 img-banner-item">
                                    <div class="imgBanner-grid-item">
                                        <div class="inner btmleft">
                                            <a href="shop-left-sidebar.html">
                                                        <span class="img">
                                                            <img class="blur-up lazyload"
                                                                 data-src="assets/images/collection-banner/demo1-cl-banner2.jpg"
                                                                 src="assets/images/collection-banner/demo1-cl-banner2.jpg"
                                                                 alt="" title=" "/>
                                                        </span>
                                                <span class="ttl head-font"><span
                                                        class="tt-small">Audio &amp; Video</span></span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-md-6 col-lg-6 img-banner-item last">
                                    <div class="imgBanner-grid-item">
                                        <div class="inner btmleft">
                                            <a href="shop-left-sidebar.html">
                                                        <span class="img">
                                                            <img class="blur-up lazyload"
                                                                 data-src="assets/images/collection-banner/demo1-cl-banner3.jpg"
                                                                 src="assets/images/collection-banner/demo1-cl-banner3.jpg"
                                                                 alt="" title=" "/>
                                                        </span>
                                                <span class="ttl head-font"><span
                                                        class="tt-small">Appliances</span></span>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="imgBanner-grid-item">
                                        <div class="inner btmleft">
                                            <a href="shop-left-sidebar.html">
                                                        <span class="img">
                                                            <img class="blur-up lazyload"
                                                                 data-src="assets/images/collection-banner/demo1-cl-banner4.jpg"
                                                                 src="assets/images/collection-banner/demo1-cl-banner4.jpg"
                                                                 alt="" title=" "/>
                                                        </span>
                                                <span class="ttl head-font"><span
                                                        class="tt-small">Gaming consoles</span></span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End Image Banner-->

        <!--热销商品-->
        <!--Trending Now-->
        <div class="section product-slider tab-slider-product no-pt-section">
            <div class="container">
                <div class="section-header style1 d-flex align-items-center align-content-center justify-content-between">
                    <div class="section-header-left">
                        <h2>Trending Now</h2>
                        <p>You can combine any sections from any demo with only one click to create your dream
                            store.</p>
                    </div>
                    <div class="section-header-right">
                        <ul class="tabs nav nav-tabs head-font" id="productTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a class="active" id="trending-tab" data-bs-toggle="tab" data-bs-target="#trending"
                                   role="tab" aria-controls="trending" aria-selected="true">Trending</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a id="camera-tab" data-bs-toggle="tab" data-bs-target="#camera" role="tab"
                                   aria-controls="camera" aria-selected="false">Camera</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a id="appliance-tab" data-bs-toggle="tab" data-bs-target="#appliance" role="tab"
                                   aria-controls="appliance" aria-selected="false">Appliance</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="tab-content" id="productTabsContent">
                    <div class="tab-pane show active grid-products" id="trending" role="tabpanel"
                         aria-labelledby="trending-tab">
                        <div class="productSlider">
                            <!--遍历hotGoods-->
                            <div class="item" th:each="good:${hotGoods}">
                                <!-- start product image -->
                                <div class="product-image">
                                    <!-- start product image -->
                                    <a th:href="@{/detail(id=${good.id})}" class="product-img">
                                        <!-- image -->
                                        <img class="primary blur-up lazyload"
                                                th:attr="data-src=@{${good.mainPicUrl ?: '/assets/images/product-images/default.jpg'}}"
                                                th:src="@{${good.mainPicUrl ?: '/assets/images/product-images/default.jpg'}}" alt="" title="">
                                        <!-- End image -->
                                        <!-- Hover image -->
                                        <img class="hover blur-up lazyload"
                                                th:attr="data-src=@{${good.mainPicUrl ?: '/assets/images/product-images/default.jpg'}}"
                                                th:src="@{${good.mainPicUrl ?: '/assets/images/product-images/default.jpg'}}" alt="" title="">
                                        <!-- End hover image -->
                                    </a>
                                    <!-- end product image -->

                                    <!--Product Button-->
                                    <div class="button-set style3">
                                        <ul>
                                            <li>
                                                <!--Quick View Button-->
                                                <a href="#quickview-popup" title="Quick View"
                                                   class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                                   data-bs-target="#quickview_popup">
                                                    <i class="icon an an-expand-arrows-alt"></i>
                                                    <span class="tooltip-label">Quick View</span>
                                                </a>
                                                <!--End Quick View Button-->
                                            </li>
                                            <li>
                                                <!--Wishlist Button-->
                                                <div class="wishlist-btn">
                                                    <a class="btn-icon wishlist add-to-wishlist"
                                                       href="my-wishlist.html">
                                                        <i class="icon an an-heart-o"></i>
                                                        <span class="tooltip-label">Add To Wishlist</span>
                                                    </a>
                                                </div>
                                                <!--End Wishlist Button-->
                                            </li>
                                            <li>
                                                <!--Compare Button-->
                                                <div class="compare-btn">
                                                    <a class="btn-icon compare add-to-compare"
                                                       href="compare-style2.html" title="Add to Compare">
                                                        <i class="icon an an-balance-scale"></i>
                                                        <span class="tooltip-label">Add to Compare</span>
                                                    </a>
                                                </div>
                                                <!--End Compare Button-->
                                            </li>
                                        </ul>
                                    </div>
                                    <!--End Product Button-->
                                </div>
                                <!-- end product image -->
                                <!--商品详情-->
                                <!--start product details -->
                                <div class="product-details text-left">
                                    <!--Brand Name-->
                                    <div class="brand-name">Electric</div>
                                    <!--End Brand Name-->
                                    <!-- product name -->
                                    <div class="product-name">
                                        <a th:href="@{/detail(id=${good.id})}" th:text="${good.name}">Camera CSG-QX10 Full Shot Lens</a>
                                    </div>
                                    <!-- End product name -->

                                    <!-- product price -->
                                    <div class="product-price">
                                                                                    <span class="old-price" th:if="${good.marketPrice}" th:text="|&yen;${good.marketPrice}|">$499.00</span>
                                        <span class="price">&yen;[[${good.price ?: 0}]]</span>
                                    </div>
                                    <!-- End product price -->

                                    <!--Product Review-->
                                    <div class="product-review">
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star gray-star"></i>
                                        <span class="review-label"><a href="#;"> 6 reviews</a></span>
                                    </div>
                                    <!--End Product Review-->

                                    <!--Color Variant -->
                                    <ul class="swatches">
                                        <li class="swatch small navy"><span class="tooltip-label">Navy</span></li>
                                        <li class="swatch small green"><span class="tooltip-label">Green</span></li>
                                        <li class="swatch small gray"><span class="tooltip-label">Gray</span></li>
                                        <li class="swatch small aqua"><span class="tooltip-label">Aqua</span></li>
                                        <li class="swatch small orange"><span class="tooltip-label">Orange</span></li>
                                    </ul>
                                    <!-- End Variant -->

                                    <!--Cart Button-->
                                    <a href="#pro-addtocart-popup" title="Add to Cart"
                                       class="btn-icon btn btn-addto-cart" data-bs-toggle="modal"
                                       data-bs-target="#pro-addtocart-popup">
                                        <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                    </a>
                                    <!--end Cart Button-->
                                </div>
                                <!-- End product details -->
                            </div>

                        </div>
                    </div>
                    <div class="tab-pane grid-products" id="camera" role="tabpanel" aria-labelledby="camera-tab">
                        <div class="productSlider">
                            <div class="item">
                                <!-- start product image -->
                                <div class="product-image">
                                    <!-- start product image -->
                                    <a href="product-layout1.html" class="product-img">
                                        <!-- image -->
                                        <img class="primary blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-9.jpg"
                                             src="assets/images/product-images/elt-p-9.jpg" alt="" title="">
                                        <!-- End image -->
                                        <!-- Hover image -->
                                        <img class="hover blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-9-1.jpg"
                                             src="assets/images/product-images/elt-p-9-1.jpg" alt="" title="">
                                        <!-- End hover image -->
                                    </a>
                                    <!-- end product image -->

                                    <!--Countdown Timer-->
                                    <div class="saleTime desktop" data-countdown="2029/03/01"></div>
                                    <!--End Countdown Timer-->

                                    <!--Product Button-->
                                    <div class="button-set style3">
                                        <ul>
                                            <li>
                                                <!--Quick View Button-->
                                                <a href="#quickview-popup" title="Quick View"
                                                   class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                                   data-bs-target="#quickview_popup">
                                                    <i class="icon an an-expand-arrows-alt"></i>
                                                    <span class="tooltip-label">Quick View</span>
                                                </a>
                                                <!--End Quick View Button-->
                                            </li>
                                            <li>
                                                <!--Wishlist Button-->
                                                <div class="wishlist-btn">
                                                    <a class="btn-icon wishlist add-to-wishlist"
                                                       href="my-wishlist.html">
                                                        <i class="icon an an-heart-o"></i>
                                                        <span class="tooltip-label">Add To Wishlist</span>
                                                    </a>
                                                </div>
                                                <!--End Wishlist Button-->
                                            </li>
                                            <li>
                                                <!--Compare Button-->
                                                <div class="compare-btn">
                                                    <a class="btn-icon compare add-to-compare"
                                                       href="compare-style2.html" title="Add to Compare">
                                                        <i class="icon an an-balance-scale"></i>
                                                        <span class="tooltip-label">Add to Compare</span>
                                                    </a>
                                                </div>
                                                <!--End Compare Button-->
                                            </li>
                                        </ul>
                                    </div>
                                    <!--End Product Button-->
                                </div>
                                <!-- end product image -->
                                <!--start product details -->
                                <div class="product-details text-left">
                                    <!--Brand Name-->
                                    <div class="brand-name">TV</div>
                                    <!--End Brand Name-->
                                    <!-- product name -->
                                    <div class="product-name">
                                        <a href="product-layout1.html">32 inches HD Ready LED TV</a>
                                    </div>
                                    <!-- End product name -->
                                    <!-- product price -->
                                    <div class="product-price">
                                        <span class="price">$899.00</span>
                                    </div>
                                    <!-- End product price -->
                                    <!--Product Review-->
                                    <div class="product-review">
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star gray-star"></i>
                                        <span class="review-label"><a href="#;">4 Reviews</a></span>
                                    </div>
                                    <!--End Product Review-->
                                    <!-- Color Variant -->
                                    <ul class="swatches">
                                        <li class="swatch small black"><span class="tooltip-label">Black</span></li>
                                        <li class="swatch small navy"><span class="tooltip-label">Navy</span></li>
                                        <li class="swatch small purple"><span class="tooltip-label">Purple</span></li>
                                    </ul>
                                    <!-- End Variant -->
                                    <!--Cart Button-->
                                    <a href="#pro-addtocart-popup" title="Add to Cart"
                                       class="btn-icon btn btn-addto-cart" data-bs-toggle="modal"
                                       data-bs-target="#pro-addtocart-popup">
                                        <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                    </a>
                                    <!--end Cart Button-->
                                </div>
                                <!-- End product details -->
                            </div>
                            <div class="item">
                                <!-- start product image -->
                                <div class="product-image">
                                    <!-- start product image -->
                                    <a href="product-layout1.html" class="product-img">
                                        <!-- image -->
                                        <img class="primary blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-10.jpg"
                                             src="assets/images/product-images/elt-p-10.jpg" alt="" title="">
                                        <!-- End image -->
                                        <!-- Hover image -->
                                        <img class="hover blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-10-1.jpg"
                                             src="assets/images/product-images/elt-p-10-1.jpg" alt="" title="">
                                        <!-- End hover image -->
                                        <span class="sold-out"><span>Sold out</span></span>
                                    </a>
                                    <!-- end product image -->
                                </div>
                                <!-- end product image -->
                                <!--start product details -->
                                <div class="product-details text-left">
                                    <!--Brand Name-->
                                    <div class="brand-name">Laptop</div>
                                    <!--End Brand Name-->
                                    <!-- product name -->
                                    <div class="product-name">
                                        <a href="product-layout1.html">All in 1 i5 high Speed Laptop 13-s102TU</a>
                                    </div>
                                    <!-- End product name -->
                                    <!-- product price -->
                                    <div class="product-price">
                                        <span class="price">$1,239.00</span>
                                    </div>
                                    <!-- End product price -->
                                    <!--Product Review-->
                                    <div class="product-review">
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <span class="review-label"><a href="#;"> 0 reviews</a></span>
                                    </div>
                                    <!--End Product Review-->
                                    <!-- Color Variant -->
                                    <ul class="swatches">
                                        <li class="swatch small black"><span class="tooltip-label">black</span></li>
                                        <li class="swatch small navy"><span class="tooltip-label">navy</span></li>
                                        <li class="swatch small darkgreen"><span class="tooltip-label">darkgreen</span>
                                        </li>
                                    </ul>
                                    <!-- End Variant -->
                                </div>
                                <!-- End product details -->
                            </div>
                            <div class="item">
                                <!-- start product image -->
                                <div class="product-image">
                                    <!-- start product image -->
                                    <a href="product-layout1.html" class="product-img">
                                        <!-- image -->
                                        <img class="primary blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-8.jpg"
                                             src="assets/images/product-images/elt-p-8.jpg" alt="" title="">
                                        <!-- End image -->
                                        <!-- Hover image -->
                                        <img class="hover blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-8-1.jpg"
                                             src="assets/images/product-images/elt-p-8-1.jpg" alt="" title="">
                                        <!-- End hover image -->
                                    </a>
                                    <!-- end product image -->
                                    <!--Product label-->
                                    <div class="product-labels"><span class="lbl pr-label1">New</span></div>
                                    <!--Product label-->

                                    <!--Product Button-->
                                    <div class="button-set style3">
                                        <ul>
                                            <li>
                                                <!--Quick View Button-->
                                                <a href="#quickview-popup" title="Quick View"
                                                   class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                                   data-bs-target="#quickview_popup">
                                                    <i class="icon an an-expand-arrows-alt"></i>
                                                    <span class="tooltip-label">Quick View</span>
                                                </a>
                                                <!--End Quick View Button-->
                                            </li>
                                            <li>
                                                <!--Wishlist Button-->
                                                <div class="wishlist-btn">
                                                    <a class="btn-icon wishlist add-to-wishlist"
                                                       href="my-wishlist.html">
                                                        <i class="icon an an-heart-o"></i>
                                                        <span class="tooltip-label">Add To Wishlist</span>
                                                    </a>
                                                </div>
                                                <!--End Wishlist Button-->
                                            </li>
                                            <li>
                                                <!--Compare Button-->
                                                <div class="compare-btn">
                                                    <a class="btn-icon compare add-to-compare"
                                                       href="compare-style2.html" title="Add to Compare">
                                                        <i class="icon an an-balance-scale"></i>
                                                        <span class="tooltip-label">Add to Compare</span>
                                                    </a>
                                                </div>
                                                <!--End Compare Button-->
                                            </li>
                                        </ul>
                                    </div>
                                    <!--End Product Button-->
                                </div>
                                <!-- end product image -->
                                <!--start product details -->
                                <div class="product-details text-left">
                                    <!--Brand Name-->
                                    <div class="brand-name">Computer</div>
                                    <!--End Brand Name-->
                                    <!-- product name -->
                                    <div class="product-name">
                                        <a href="product-layout1.html">Computer i3 15.6 inches Laptop</a>
                                    </div>
                                    <!-- End product name -->
                                    <!-- product price -->
                                    <div class="product-price">
                                        <span class="price">$299.00</span>
                                    </div>
                                    <!-- End product price -->
                                    <!--Product Review-->
                                    <div class="product-review">
                                        <i class="font-13 fa fa-star"></i>
                                        <i class="font-13 fa fa-star"></i>
                                        <i class="font-13 fa fa-star-o"></i>
                                        <i class="font-13 fa fa-star-o"></i>
                                        <i class="font-13 fa fa-star-o"></i>
                                        <span class="review-label"><a href="#;"> 3 reviews</a></span>

                                    </div>
                                    <!--End Product Review-->
                                    <!--Cart Button-->
                                    <a href="#pro-addtocart-popup" title="Add to Cart"
                                       class="btn-icon btn btn-addto-cart" data-bs-toggle="modal"
                                       data-bs-target="#pro-addtocart-popup">
                                        <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                    </a>
                                    <!--end Cart Button-->
                                </div>
                                <!-- End product details -->
                            </div>
                            <div class="item">
                                <!-- start product image -->
                                <div class="product-image">
                                    <!-- start product image -->
                                    <a href="product-layout1.html" class="product-img">
                                        <!-- image -->
                                        <img class="primary blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-12-1.jpg"
                                             src="assets/images/product-images/elt-p-12.jpg" alt="" title="">
                                        <!-- End image -->
                                        <!-- Hover image -->
                                        <img class="hover blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-12-1.jpg"
                                             src="assets/images/product-images/elt-p-12-1.jpg" alt="" title="">
                                        <!-- End hover image -->
                                    </a>
                                    <!-- end product image -->
                                    <!--Product label-->
                                    <div class="product-labels"><span class="lbl pr-label2">Hot</span></div>
                                    <!--Product label-->
                                    <!--Product Button-->
                                    <div class="button-set style1">
                                        <ul>
                                            <li>
                                                <!--Quick View Button-->
                                                <a href="#quickview-popup" title="Quick View"
                                                   class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                                   data-bs-target="#quickview_popup">
                                                    <i class="icon an an-expand-arrows-alt"></i>
                                                    <span class="tooltip-label">Quick View</span>
                                                </a>
                                                <!--End Quick View Button-->
                                            </li>
                                            <li>
                                                <!--Wishlist Button-->
                                                <div class="wishlist-btn">
                                                    <a class="btn-icon wishlist add-to-wishlist"
                                                       href="my-wishlist.html">
                                                        <i class="icon an an-heart-o"></i>
                                                        <span class="tooltip-label">Add To Wishlist</span>
                                                    </a>
                                                </div>
                                                <!--End Wishlist Button-->
                                            </li>
                                            <li>
                                                <!--Compare Button-->
                                                <div class="compare-btn">
                                                    <a class="btn-icon compare add-to-compare"
                                                       href="compare-style2.html" title="Add to Compare">
                                                        <i class="icon an an-balance-scale"></i>
                                                        <span class="tooltip-label">Add to Compare</span>
                                                    </a>
                                                </div>
                                                <!--End Compare Button-->
                                            </li>
                                        </ul>
                                    </div>
                                    <!--End Product Button-->
                                </div>
                                <!-- end product image -->
                                <!--start product details -->
                                <div class="product-details text-left">
                                    <!--Brand Name-->
                                    <div class="brand-name">Camcorder</div>
                                    <!--End Brand Name-->
                                    <!-- product name -->
                                    <div class="product-name">
                                        <a href="product-layout1.html">ATX-NX100 24 MP Camcorder</a>
                                    </div>
                                    <!-- End product name -->
                                    <!-- product price -->
                                    <div class="product-price">
                                        <span class="price">$1,299.00</span>
                                    </div>
                                    <!-- End product price -->
                                    <!--Product Review-->
                                    <div class="product-review">
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star gray-star"></i>
                                        <span class="review-label"><a href="#;"> 1 reviews</a></span>
                                    </div>
                                    <!--End Product Review-->
                                    <!-- Color Variant -->
                                    <ul class="swatches">
                                        <li class="swatch small gray"><span class="tooltip-label">gray</span></li>
                                        <li class="swatch small red"><span class="tooltip-label">red</span></li>
                                        <li class="swatch small orange"><span class="tooltip-label">orange</span></li>
                                        <li class="swatch small yellow"><span class="tooltip-label">yellow</span></li>
                                    </ul>
                                    <!-- End Variant -->
                                    <!--Cart Button-->
                                    <a href="#pro-addtocart-popup" title="Add to Cart"
                                       class="btn-icon btn btn-addto-cart" data-bs-toggle="modal"
                                       data-bs-target="#pro-addtocart-popup">
                                        <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                    </a>
                                    <!--end Cart Button-->
                                </div>
                                <!-- End product details -->
                            </div>
                            <div class="item">
                                <!-- start product image -->
                                <div class="product-image">
                                    <!-- start product image -->
                                    <a href="product-layout1.html" class="product-img">
                                        <!-- image -->
                                        <img class="primary blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-11.jpg"
                                             src="assets/images/product-images/elt-p-11.jpg" alt="" title="">
                                        <!-- End image -->
                                        <!-- Hover image -->
                                        <img class="hover blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-11-1.jpg"
                                             src="assets/images/product-images/elt-p-11-1.jpg" alt="" title="">
                                        <!-- End hover image -->
                                    </a>
                                    <!-- end product image -->

                                    <!--Product Button-->
                                    <div class="button-set style3">
                                        <ul>
                                            <li>
                                                <!--Quick View Button-->
                                                <a href="#quickview-popup" title="Quick View"
                                                   class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                                   data-bs-target="#quickview_popup">
                                                    <i class="icon an an-expand-arrows-alt"></i>
                                                    <span class="tooltip-label">Quick View</span>
                                                </a>
                                                <!--End Quick View Button-->
                                            </li>
                                            <li>
                                                <!--Wishlist Button-->
                                                <div class="wishlist-btn">
                                                    <a class="btn-icon wishlist add-to-wishlist"
                                                       href="my-wishlist.html">
                                                        <i class="icon an an-heart-o"></i>
                                                        <span class="tooltip-label">Add To Wishlist</span>
                                                    </a>
                                                </div>
                                                <!--End Wishlist Button-->
                                            </li>
                                            <li>
                                                <!--Compare Button-->
                                                <div class="compare-btn">
                                                    <a class="btn-icon compare add-to-compare"
                                                       href="compare-style2.html" title="Add to Compare">
                                                        <i class="icon an an-balance-scale"></i>
                                                        <span class="tooltip-label">Add to Compare</span>
                                                    </a>
                                                </div>
                                                <!--End Compare Button-->
                                            </li>
                                        </ul>
                                    </div>
                                    <!--End Product Button-->
                                </div>
                                <!-- end product image -->
                                <!--start product details -->
                                <div class="product-details text-left">
                                    <!--Brand Name-->
                                    <div class="brand-name">Camera</div>
                                    <!--End Brand Name-->
                                    <!-- product name -->
                                    <div class="product-name">
                                        <a href="product-layout1.html">CyberShot 20.1 MP Point &amp; Shoot Camera</a>
                                    </div>
                                    <!-- End product name -->
                                    <!-- product price -->
                                    <div class="product-price">
                                        <span class="old-price">$299.00</span>
                                        <span class="price">$260.00</span>
                                    </div>
                                    <!-- End product price -->
                                    <!--Product Review-->
                                    <div class="product-review">
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star gray-star"></i>
                                        <i class="an an-star gray-star"></i>
                                        <span class="review-label"><a href="#;"> 8 reviews</a></span>
                                    </div>
                                    <!--End Product Review-->
                                    <!-- Color Variant -->
                                    <ul class="swatches">
                                        <li class="swatch small black"><span class="tooltip-label">black</span></li>
                                        <li class="swatch small maroon"><span class="tooltip-label">maroon</span></li>
                                    </ul>
                                    <!-- End Variant -->
                                    <!--Cart Button-->
                                    <a href="#pro-addtocart-popup" title="Add to Cart"
                                       class="btn-icon btn btn-addto-cart" data-bs-toggle="modal"
                                       data-bs-target="#pro-addtocart-popup">
                                        <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                    </a>
                                    <!--end Cart Button-->
                                </div>
                                <!-- End product details -->
                            </div>
                            <div class="item">
                                <!-- start product image -->
                                <div class="product-image">
                                    <!-- start product image -->
                                    <a href="product-layout1.html" class="product-img">
                                        <!-- image -->
                                        <img class="primary blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-7.jpg"
                                             src="assets/images/product-images/elt-p-7.jpg" alt="" title="">
                                        <!-- End image -->
                                        <!-- Hover image -->
                                        <img class="hover blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-7-1.jpg"
                                             src="assets/images/product-images/elt-p-7-1.jpg" alt="" title="">
                                        <!-- End hover image -->
                                        <!-- product label -->
                                        <div class="product-labels"><span class="lbl on-sale">Sale</span></div>
                                        <!-- End product label -->
                                    </a>
                                    <!-- end product image -->

                                    <!--Product Button-->
                                    <div class="button-set style3">
                                        <ul>
                                            <li>
                                                <!--Quick View Button-->
                                                <a href="#quickview-popup" title="Quick View"
                                                   class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                                   data-bs-target="#quickview_popup">
                                                    <i class="icon an an-expand-arrows-alt"></i>
                                                    <span class="tooltip-label">Quick View</span>
                                                </a>
                                                <!--End Quick View Button-->
                                            </li>
                                            <li>
                                                <!--Wishlist Button-->
                                                <div class="wishlist-btn">
                                                    <a class="btn-icon wishlist add-to-wishlist"
                                                       href="my-wishlist.html">
                                                        <i class="icon an an-heart-o"></i>
                                                        <span class="tooltip-label">Add To Wishlist</span>
                                                    </a>
                                                </div>
                                                <!--End Wishlist Button-->
                                            </li>
                                            <li>
                                                <!--Compare Button-->
                                                <div class="compare-btn">
                                                    <a class="btn-icon compare add-to-compare"
                                                       href="compare-style2.html" title="Add to Compare">
                                                        <i class="icon an an-balance-scale"></i>
                                                        <span class="tooltip-label">Add to Compare</span>
                                                    </a>
                                                </div>
                                                <!--End Compare Button-->
                                            </li>
                                        </ul>
                                    </div>
                                    <!--End Product Button-->
                                </div>
                                <!-- end product image -->
                                <!--start product details -->
                                <div class="product-details text-left">
                                    <!--Brand Name-->
                                    <div class="brand-name">Lens</div>
                                    <!--End Brand Name-->
                                    <!-- product name -->
                                    <div class="product-name">
                                        <a href="product-layout1.html">Camera CSG-QX10 Full Shot Lens</a>
                                    </div>
                                    <!-- End product name -->
                                    <!-- product price -->
                                    <div class="product-price">
                                        <span class="old-price">$499.00</span>
                                        <span class="price">$399.00</span>
                                    </div>
                                    <!-- End product price -->
                                    <!--Product Review-->
                                    <div class="product-review">
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star gray-star"></i>
                                        <span class="review-label"><a href="#;"> 6 reviews</a></span>
                                    </div>
                                    <!--End Product Review-->
                                    <!--Color Variant -->
                                    <ul class="swatches">
                                        <li class="swatch small navy"><span class="tooltip-label">Navy</span></li>
                                        <li class="swatch small green"><span class="tooltip-label">Green</span></li>
                                        <li class="swatch small gray"><span class="tooltip-label">Gray</span></li>
                                        <li class="swatch small aqua"><span class="tooltip-label">Aqua</span></li>
                                        <li class="swatch small orange"><span class="tooltip-label">Orange</span></li>
                                    </ul>
                                    <!-- End Variant -->
                                    <!--Cart Button-->
                                    <a href="#pro-addtocart-popup" title="Add to Cart"
                                       class="btn-icon btn btn-addto-cart" data-bs-toggle="modal"
                                       data-bs-target="#pro-addtocart-popup">
                                        <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                    </a>
                                    <!--end Cart Button-->
                                </div>
                                <!-- End product details -->
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane grid-products" id="appliance" role="tabpanel" aria-labelledby="appliance-tab">
                        <div class="productSlider">
                            <div class="item">
                                <!-- start product image -->
                                <div class="product-image">
                                    <!-- start product image -->
                                    <a href="product-layout1.html" class="product-img">
                                        <!-- image -->
                                        <img class="primary blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-12-1.jpg"
                                             src="assets/images/product-images/elt-p-12.jpg" alt="" title="">
                                        <!-- End image -->
                                        <!-- Hover image -->
                                        <img class="hover blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-12-1.jpg"
                                             src="assets/images/product-images/elt-p-12-1.jpg" alt="" title="">
                                        <!-- End hover image -->
                                    </a>
                                    <!-- end product image -->
                                    <!--Product label-->
                                    <div class="product-labels"><span class="lbl pr-label2">Hot</span></div>
                                    <!--Product label-->
                                    <!--Product Button-->
                                    <div class="button-set style1">
                                        <ul>
                                            <li>
                                                <!--Quick View Button-->
                                                <a href="#quickview-popup" title="Quick View"
                                                   class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                                   data-bs-target="#quickview_popup">
                                                    <i class="icon an an-expand-arrows-alt"></i>
                                                    <span class="tooltip-label">Quick View</span>
                                                </a>
                                                <!--End Quick View Button-->
                                            </li>
                                            <li>
                                                <!--Wishlist Button-->
                                                <div class="wishlist-btn">
                                                    <a class="btn-icon wishlist add-to-wishlist"
                                                       href="my-wishlist.html">
                                                        <i class="icon an an-heart-o"></i>
                                                        <span class="tooltip-label">Add To Wishlist</span>
                                                    </a>
                                                </div>
                                                <!--End Wishlist Button-->
                                            </li>
                                            <li>
                                                <!--Compare Button-->
                                                <div class="compare-btn">
                                                    <a class="btn-icon compare add-to-compare"
                                                       href="compare-style2.html" title="Add to Compare">
                                                        <i class="icon an an-balance-scale"></i>
                                                        <span class="tooltip-label">Add to Compare</span>
                                                    </a>
                                                </div>
                                                <!--End Compare Button-->
                                            </li>
                                        </ul>
                                    </div>
                                    <!--End Product Button-->
                                </div>
                                <!-- end product image -->
                                <!--start product details -->
                                <div class="product-details text-left">
                                    <!--Brand Name-->
                                    <div class="brand-name">Camcorder</div>
                                    <!--End Brand Name-->
                                    <!-- product name -->
                                    <div class="product-name">
                                        <a href="product-layout1.html">ATX-NX100 24 MP Camcorder</a>
                                    </div>
                                    <!-- End product name -->
                                    <!-- product price -->
                                    <div class="product-price">
                                        <span class="price">$1,299.00</span>
                                    </div>
                                    <!-- End product price -->
                                    <!--Product Review-->
                                    <div class="product-review">
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star gray-star"></i>
                                        <span class="review-label"><a href="#;"> 1 reviews</a></span>
                                    </div>
                                    <!--End Product Review-->
                                    <!-- Color Variant -->
                                    <ul class="swatches">
                                        <li class="swatch small gray"><span class="tooltip-label">gray</span></li>
                                        <li class="swatch small red"><span class="tooltip-label">red</span></li>
                                        <li class="swatch small orange"><span class="tooltip-label">orange</span></li>
                                        <li class="swatch small yellow"><span class="tooltip-label">yellow</span></li>
                                    </ul>
                                    <!-- End Variant -->
                                    <!--Cart Button-->
                                    <a href="#pro-addtocart-popup" title="Add to Cart"
                                       class="btn-icon btn btn-addto-cart" data-bs-toggle="modal"
                                       data-bs-target="#pro-addtocart-popup">
                                        <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                    </a>
                                    <!--end Cart Button-->
                                </div>
                                <!-- End product details -->
                            </div>
                            <div class="item">
                                <!-- start product image -->
                                <div class="product-image">
                                    <!-- start product image -->
                                    <a href="product-layout1.html" class="product-img">
                                        <!-- image -->
                                        <img class="primary blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-8.jpg"
                                             src="assets/images/product-images/elt-p-8.jpg" alt="" title="">
                                        <!-- End image -->
                                        <!-- Hover image -->
                                        <img class="hover blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-8-1.jpg"
                                             src="assets/images/product-images/elt-p-8-1.jpg" alt="" title="">
                                        <!-- End hover image -->
                                    </a>
                                    <!-- end product image -->
                                    <!--Product label-->
                                    <div class="product-labels"><span class="lbl pr-label1">New</span></div>
                                    <!--Product label-->

                                    <!--Product Button-->
                                    <div class="button-set style3">
                                        <ul>
                                            <li>
                                                <!--Quick View Button-->
                                                <a href="#quickview-popup" title="Quick View"
                                                   class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                                   data-bs-target="#quickview_popup">
                                                    <i class="icon an an-expand-arrows-alt"></i>
                                                    <span class="tooltip-label">Quick View</span>
                                                </a>
                                                <!--End Quick View Button-->
                                            </li>
                                            <li>
                                                <!--Wishlist Button-->
                                                <div class="wishlist-btn">
                                                    <a class="btn-icon wishlist add-to-wishlist"
                                                       href="my-wishlist.html">
                                                        <i class="icon an an-heart-o"></i>
                                                        <span class="tooltip-label">Add To Wishlist</span>
                                                    </a>
                                                </div>
                                                <!--End Wishlist Button-->
                                            </li>
                                            <li>
                                                <!--Compare Button-->
                                                <div class="compare-btn">
                                                    <a class="btn-icon compare add-to-compare"
                                                       href="compare-style2.html" title="Add to Compare">
                                                        <i class="icon an an-balance-scale"></i>
                                                        <span class="tooltip-label">Add to Compare</span>
                                                    </a>
                                                </div>
                                                <!--End Compare Button-->
                                            </li>
                                        </ul>
                                    </div>
                                    <!--End Product Button-->
                                </div>
                                <!-- end product image -->
                                <!--start product details -->
                                <div class="product-details text-left">
                                    <!--Brand Name-->
                                    <div class="brand-name">Laptop</div>
                                    <!--End Brand Name-->
                                    <!-- product name -->
                                    <div class="product-name">
                                        <a href="product-layout1.html">Laptop i3 15.6 inches Laptop</a>
                                    </div>
                                    <!-- End product name -->
                                    <!-- product price -->
                                    <div class="product-price">
                                        <span class="price">$299.00</span>
                                    </div>
                                    <!-- End product price -->
                                    <!--Product Review-->
                                    <div class="product-review">
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star gray-star"></i>
                                        <span class="review-label"><a href="#;"> 3 reviews</a></span>

                                    </div>
                                    <!--End Product Review-->
                                    <!--Cart Button-->
                                    <a href="#pro-addtocart-popup" title="Add to Cart"
                                       class="btn-icon btn btn-addto-cart" data-bs-toggle="modal"
                                       data-bs-target="#pro-addtocart-popup">
                                        <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                    </a>
                                    <!--end Cart Button-->
                                </div>
                                <!-- End product details -->
                            </div>
                            <div class="item">
                                <!-- start product image -->
                                <div class="product-image">
                                    <!-- start product image -->
                                    <a href="product-layout1.html" class="product-img">
                                        <!-- image -->
                                        <img class="primary blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-7.jpg"
                                             src="assets/images/product-images/elt-p-7.jpg" alt="" title="">
                                        <!-- End image -->
                                        <!-- Hover image -->
                                        <img class="hover blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-7-1.jpg"
                                             src="assets/images/product-images/elt-p-7-1.jpg" alt="" title="">
                                        <!-- End hover image -->
                                        <!-- product label -->
                                        <div class="product-labels"><span class="lbl on-sale">Sale</span></div>
                                        <!-- End product label -->
                                    </a>
                                    <!-- end product image -->

                                    <!--Product Button-->
                                    <div class="button-set style3">
                                        <ul>
                                            <li>
                                                <!--Quick View Button-->
                                                <a href="#quickview-popup" title="Quick View"
                                                   class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                                   data-bs-target="#quickview_popup">
                                                    <i class="icon an an-expand-arrows-alt"></i>
                                                    <span class="tooltip-label">Quick View</span>
                                                </a>
                                                <!--End Quick View Button-->
                                            </li>
                                            <li>
                                                <!--Wishlist Button-->
                                                <div class="wishlist-btn">
                                                    <a class="btn-icon wishlist add-to-wishlist"
                                                       href="my-wishlist.html">
                                                        <i class="icon an an-heart-o"></i>
                                                        <span class="tooltip-label">Add To Wishlist</span>
                                                    </a>
                                                </div>
                                                <!--End Wishlist Button-->
                                            </li>
                                            <li>
                                                <!--Compare Button-->
                                                <div class="compare-btn">
                                                    <a class="btn-icon compare add-to-compare"
                                                       href="compare-style2.html" title="Add to Compare">
                                                        <i class="icon an an-balance-scale"></i>
                                                        <span class="tooltip-label">Add to Compare</span>
                                                    </a>
                                                </div>
                                                <!--End Compare Button-->
                                            </li>
                                        </ul>
                                    </div>
                                    <!--End Product Button-->
                                </div>
                                <!-- end product image -->
                                <!--start product details -->
                                <div class="product-details text-left">
                                    <!--Brand Name-->
                                    <div class="brand-name">Lens</div>
                                    <!--End Brand Name-->
                                    <!-- product name -->
                                    <div class="product-name">
                                        <a href="product-layout1.html">Camera CSG-QX10 Full Shot Lens</a>
                                    </div>
                                    <!-- End product name -->
                                    <!-- product price -->
                                    <div class="product-price">
                                        <span class="old-price">$499.00</span>
                                        <span class="price">$399.00</span>
                                    </div>
                                    <!-- End product price -->
                                    <!--Product Review-->
                                    <div class="product-review">
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star gray-star"></i>
                                        <span class="review-label"><a href="#;"> 6 reviews</a></span>
                                    </div>
                                    <!--End Product Review-->
                                    <!--Color Variant -->
                                    <ul class="swatches">
                                        <li class="swatch small navy"><span class="tooltip-label">Navy</span></li>
                                        <li class="swatch small green"><span class="tooltip-label">Green</span></li>
                                        <li class="swatch small gray"><span class="tooltip-label">Gray</span></li>
                                        <li class="swatch small aqua"><span class="tooltip-label">Aqua</span></li>
                                        <li class="swatch small orange"><span class="tooltip-label">Orange</span></li>
                                    </ul>
                                    <!-- End Variant -->
                                    <!--Cart Button-->
                                    <a href="#pro-addtocart-popup" title="Add to Cart"
                                       class="btn-icon btn btn-addto-cart" data-bs-toggle="modal"
                                       data-bs-target="#pro-addtocart-popup">
                                        <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                    </a>
                                    <!--end Cart Button-->
                                </div>
                                <!-- End product details -->
                            </div>
                            <div class="item">
                                <!-- start product image -->
                                <div class="product-image">
                                    <!-- start product image -->
                                    <a href="product-layout1.html" class="product-img">
                                        <!-- image -->
                                        <img class="primary blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-9.jpg"
                                             src="assets/images/product-images/elt-p-9.jpg" alt="" title="">
                                        <!-- End image -->
                                        <!-- Hover image -->
                                        <img class="hover blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-9-1.jpg"
                                             src="assets/images/product-images/elt-p-9-1.jpg" alt="" title="">
                                        <!-- End hover image -->
                                    </a>
                                    <!-- end product image -->

                                    <!--Countdown Timer-->
                                    <div class="saleTime desktop" data-countdown="2029/03/01"></div>
                                    <!--End Countdown Timer-->

                                    <!--Product Button-->
                                    <div class="button-set style3">
                                        <ul>
                                            <li>
                                                <!--Quick View Button-->
                                                <a href="#quickview-popup" title="Quick View"
                                                   class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                                   data-bs-target="#quickview_popup">
                                                    <i class="icon an an-expand-arrows-alt"></i>
                                                    <span class="tooltip-label">Quick View</span>
                                                </a>
                                                <!--End Quick View Button-->
                                            </li>
                                            <li>
                                                <!--Wishlist Button-->
                                                <div class="wishlist-btn">
                                                    <a class="btn-icon wishlist add-to-wishlist"
                                                       href="my-wishlist.html">
                                                        <i class="icon an an-heart-o"></i>
                                                        <span class="tooltip-label">Add To Wishlist</span>
                                                    </a>
                                                </div>
                                                <!--End Wishlist Button-->
                                            </li>
                                            <li>
                                                <!--Compare Button-->
                                                <div class="compare-btn">
                                                    <a class="btn-icon compare add-to-compare"
                                                       href="compare-style2.html" title="Add to Compare">
                                                        <i class="icon an an-balance-scale"></i>
                                                        <span class="tooltip-label">Add to Compare</span>
                                                    </a>
                                                </div>
                                                <!--End Compare Button-->
                                            </li>
                                        </ul>
                                    </div>
                                    <!--End Product Button-->
                                </div>
                                <!-- end product image -->
                                <!--start product details -->
                                <div class="product-details text-left">
                                    <!--Brand Name-->
                                    <div class="brand-name">TV</div>
                                    <!--End Brand Name-->
                                    <!-- product name -->
                                    <div class="product-name">
                                        <a href="product-layout1.html">32 inches HD Ready LED TV</a>
                                    </div>
                                    <!-- End product name -->
                                    <!-- product price -->
                                    <div class="product-price">
                                        <span class="price">$899.00</span>
                                    </div>
                                    <!-- End product price -->
                                    <!--Product Review-->
                                    <div class="product-review">
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star gray-star"></i>
                                        <i class="an an-star gray-star"></i>
                                        <span class="review-label"><a href="#;"> 4 reviews</a></span>
                                    </div>
                                    <!--End Product Review-->
                                    <!-- Color Variant -->
                                    <ul class="swatches">
                                        <li class="swatch small black"><span class="tooltip-label">Black</span></li>
                                        <li class="swatch small navy"><span class="tooltip-label">Navy</span></li>
                                        <li class="swatch small purple"><span class="tooltip-label">Purple</span></li>
                                    </ul>
                                    <!-- End Variant -->
                                    <!--Cart Button-->
                                    <a href="#pro-addtocart-popup" title="Add to Cart"
                                       class="btn-icon btn btn-addto-cart" data-bs-toggle="modal"
                                       data-bs-target="#pro-addtocart-popup">
                                        <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                    </a>
                                    <!--end Cart Button-->
                                </div>
                                <!-- End product details -->
                            </div>
                            <div class="item">
                                <!-- start product image -->
                                <div class="product-image">
                                    <!-- start product image -->
                                    <a href="product-layout1.html" class="product-img">
                                        <!-- image -->
                                        <img class="primary blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-11.jpg"
                                             src="assets/images/product-images/elt-p-11.jpg" alt="" title="">
                                        <!-- End image -->
                                        <!-- Hover image -->
                                        <img class="hover blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-11-1.jpg"
                                             src="assets/images/product-images/elt-p-11-1.jpg" alt="" title="">
                                        <!-- End hover image -->
                                    </a>
                                    <!-- end product image -->

                                    <!--Product Button-->
                                    <div class="button-set style3">
                                        <ul>
                                            <li>
                                                <!--Quick View Button-->
                                                <a href="#quickview-popup" title="Quick View"
                                                   class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                                   data-bs-target="#quickview_popup">
                                                    <i class="icon an an-expand-arrows-alt"></i>
                                                    <span class="tooltip-label">Quick View</span>
                                                </a>
                                                <!--End Quick View Button-->
                                            </li>
                                            <li>
                                                <!--Wishlist Button-->
                                                <div class="wishlist-btn">
                                                    <a class="btn-icon wishlist add-to-wishlist"
                                                       href="my-wishlist.html">
                                                        <i class="icon an an-heart-o"></i>
                                                        <span class="tooltip-label">Add To Wishlist</span>
                                                    </a>
                                                </div>
                                                <!--End Wishlist Button-->
                                            </li>
                                            <li>
                                                <!--Compare Button-->
                                                <div class="compare-btn">
                                                    <a class="btn-icon compare add-to-compare"
                                                       href="compare-style2.html" title="Add to Compare">
                                                        <i class="icon an an-balance-scale"></i>
                                                        <span class="tooltip-label">Add to Compare</span>
                                                    </a>
                                                </div>
                                                <!--End Compare Button-->
                                            </li>
                                        </ul>
                                    </div>
                                    <!--End Product Button-->
                                </div>
                                <!-- end product image -->
                                <!--start product details -->
                                <div class="product-details text-left">
                                    <!--Brand Name-->
                                    <div class="brand-name">Camera</div>
                                    <!--End Brand Name-->
                                    <!-- product name -->
                                    <div class="product-name">
                                        <a href="product-layout1.html">CyberShot 20.1 MP Point &amp; Shoot Camera</a>
                                    </div>
                                    <!-- End product name -->
                                    <!-- product price -->
                                    <div class="product-price">
                                        <span class="old-price">$299.00</span>
                                        <span class="price">$260.00</span>
                                    </div>
                                    <!-- End product price -->
                                    <!--Product Review-->
                                    <div class="product-review">
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star gray-star"></i>
                                        <i class="an an-star gray-star"></i>
                                        <span class="review-label"><a href="#;"> 8 reviews</a></span>
                                    </div>
                                    <!--End Product Review-->
                                    <!-- Color Variant -->
                                    <ul class="swatches">
                                        <li class="swatch small black"><span class="tooltip-label">black</span></li>
                                        <li class="swatch small maroon"><span class="tooltip-label">maroon</span></li>
                                    </ul>
                                    <!-- End Variant -->
                                    <!--Cart Button-->
                                    <a href="#pro-addtocart-popup" title="Add to Cart"
                                       class="btn-icon btn btn-addto-cart" data-bs-toggle="modal"
                                       data-bs-target="#pro-addtocart-popup">
                                        <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                    </a>
                                    <!--end Cart Button-->
                                </div>
                                <!-- End product details -->
                            </div>
                            <div class="item">
                                <!-- start product image -->
                                <div class="product-image">
                                    <!-- start product image -->
                                    <a href="product-layout1.html" class="product-img">
                                        <!-- image -->
                                        <img class="primary blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-10.jpg"
                                             src="assets/images/product-images/elt-p-10.jpg" alt="" title="">
                                        <!-- End image -->
                                        <!-- Hover image -->
                                        <img class="hover blur-up lazyload"
                                             data-src="assets/images/product-images/elt-p-10-1.jpg"
                                             src="assets/images/product-images/elt-p-10-1.jpg" alt="" title="">
                                        <!-- End hover image -->
                                        <span class="sold-out"><span>Sold out</span></span>
                                    </a>
                                    <!-- end product image -->
                                </div>
                                <!-- end product image -->
                                <!--start product details -->
                                <div class="product-details text-left">
                                    <!--Brand Name-->
                                    <div class="brand-name">Laptop</div>
                                    <!--End Brand Name-->
                                    <!-- product name -->
                                    <div class="product-name">
                                        <a href="product-layout1.html">All in 1 i5 high Speed Laptop</a>
                                    </div>
                                    <!-- End product name -->
                                    <!-- product price -->
                                    <div class="product-price">
                                        <span class="price">$1,239.00</span>
                                    </div>
                                    <!-- End product price -->
                                    <!--Product Review-->
                                    <div class="product-review">
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <i class="an an-star"></i>
                                        <span class="review-label"><a href="#;"> 0 reviews</a></span>
                                    </div>
                                    <!--End Product Review-->
                                    <!-- Color Variant -->
                                    <ul class="swatches">
                                        <li class="swatch small black"><span class="tooltip-label">black</span></li>
                                        <li class="swatch small navy"><span class="tooltip-label">navy</span></li>
                                        <li class="swatch small darkgreen"><span class="tooltip-label">darkgreen</span>
                                        </li>
                                    </ul>
                                    <!-- End Variant -->
                                </div>
                                <!-- End product details -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End Trending Now-->

        <!--Top Categories-->
        <div class="section categories-section">
            <div class="container">
                <div class="section-header style1 d-flex align-items-center align-content-center justify-content-between">
                    <div class="section-header-left">
                        <h2>Top Categories</h2>
                        <p>Shoplook is a clean, modern, user friendly, responsive and highly customizable HTML
                            Template.</p>
                    </div>
                    <div class="section-header-right">
                        <a href="shop-left-sidebar.html" class="btn btn-large">View More</a>
                    </div>
                </div>
                <div class="category-style1">
                    <div class="items">
                        <div class="item d-flex">
                            <div class="content-image">
                                <a href="shop-left-sidebar.html"><img class="blur-up lazyload"
                                                                      data-src="assets/images/collection-banner/cat-img1.jpg"
                                                                      src="assets/images/collection-banner/cat-img1.jpg"
                                                                      alt="Accessories" title="Accessories"></a>
                            </div>
                            <div class="content">
                                <h2 class="item-title"><a href="shop-left-sidebar.html">Accessories</a></h2>
                                <ul class="item-children">
                                    <li><a href="shop-left-sidebar.html">Car Electronics</a></li>
                                    <li><a href="shop-left-sidebar.html">Garden Tools</a></li>
                                    <li><a href="shop-left-sidebar.html">Office Electronics</a></li>
                                    <li><a href="shop-left-sidebar.html">Watch</a></li>
                                </ul>
                                <div class="item-btn"><a href="shop-left-sidebar.html"
                                                         class="btn btn--small btn-secondary">View more</a></div>
                            </div>
                        </div>
                        <div class="item d-flex">
                            <div class="content-image">
                                <a href="shop-left-sidebar.html"><img class="blur-up lazyload"
                                                                      data-src="assets/images/collection-banner/cat-img2.jpg"
                                                                      src="assets/images/collection-banner/cat-img2.jpg"
                                                                      alt="Computer & Laptop" title="Computer & Laptop"></a>
                            </div>
                            <div class="content">
                                <h2 class="item-title"><a href="shop-left-sidebar.html">Computer & Laptop</a></h2>
                                <ul class="item-children">
                                    <li><a href="shop-left-sidebar.html">Desktop PC</a></li>
                                    <li><a href="shop-left-sidebar.html">Graphic Card</a></li>
                                    <li><a href="shop-left-sidebar.html">Laptop</a></li>
                                    <li><a href="shop-left-sidebar.html">PC Gaming</a></li>
                                </ul>
                                <div class="item-btn"><a href="shop-left-sidebar.html"
                                                         class="btn btn--small btn-secondary">View more</a></div>
                            </div>
                        </div>
                    </div>
                    <div class="items">
                        <div class="item d-flex">
                            <div class="content-image">
                                <a href="shop-left-sidebar.html"><img class="blur-up lazyload"
                                                                      data-src="assets/images/collection-banner/cat-img3.jpg"
                                                                      src="assets/images/collection-banner/cat-img3.jpg"
                                                                      alt="Audio & Video" title="Audio & Video"></a>
                            </div>
                            <div class="content">
                                <h2 class="item-title"><a href="shop-left-sidebar.html">Audio &amp; Video</a></h2>
                                <ul class="item-children">
                                    <li><a href="shop-left-sidebar.html">Displayport Cable</a></li>
                                    <li><a href="shop-left-sidebar.html">Displayport to Vga</a></li>
                                    <li><a href="shop-left-sidebar.html">iPod Touch</a></li>
                                    <li><a href="shop-left-sidebar.html">Speaker Box</a></li>
                                </ul>
                                <div class="item-btn"><a href="shop-left-sidebar.html"
                                                         class="btn btn--small btn-secondary">View more</a></div>
                            </div>
                        </div>
                        <div class="item d-flex">
                            <div class="content-image">
                                <a href="shop-left-sidebar.html"><img class="blur-up lazyload"
                                                                      data-src="assets/images/collection-banner/cat-img4.jpg"
                                                                      src="assets/images/collection-banner/cat-img4.jpg"
                                                                      alt="Digital Cameras" title="Digital Cameras"></a>
                            </div>
                            <div class="content">
                                <h2 class="item-title"><a href="#;">Digital Cameras</a></h2>
                                <ul class="item-children">
                                    <li><a href="shop-left-sidebar.html">Film Photography</a></li>
                                    <li><a href="shop-left-sidebar.html">Lighting &amp; Studio</a></li>
                                    <li><a href="shop-left-sidebar.html">Simulated Cameras</a></li>
                                    <li><a href="shop-left-sidebar.html">Video Surveillance</a></li>
                                </ul>
                                <div class="item-btn"><a href="shop-left-sidebar.html"
                                                         class="btn btn--small btn-secondary">View more</a></div>
                            </div>
                        </div>
                    </div>
                    <div class="items">
                        <div class="item d-flex">
                            <div class="content-image">
                                <a href="shop-left-sidebar.html"><img class="blur-up lazyload"
                                                                      data-src="assets/images/collection-banner/cat-img5.jpg"
                                                                      src="assets/images/collection-banner/cat-img5.jpg"
                                                                      alt="Game & Video" title="Game & Video"></a>
                            </div>
                            <div class="content">
                                <h2 class="item-title"><a href="shop-left-sidebar.html">Game &amp; Video</a></h2>
                                <ul class="item-children">
                                    <li><a href="shop-left-sidebar.html">Nintendo Switch</a></li>
                                    <li><a href="shop-left-sidebar.html">PlayStation 5</a></li>
                                    <li><a href="shop-left-sidebar.html">PlayStation Vita</a></li>
                                    <li><a href="shop-left-sidebar.html">Xbox 360</a></li>
                                </ul>
                                <div class="item-btn"><a href="shop-left-sidebar.html"
                                                         class="btn btn--small btn-secondary">View more</a></div>
                            </div>
                        </div>
                        <div class="item d-flex">
                            <div class="content-image">
                                <a href="shop-left-sidebar.html"><img class="blur-up lazyload"
                                                                      data-src="assets/images/collection-banner/cat-img6.jpg"
                                                                      src="assets/images/collection-banner/cat-img6.jpg"
                                                                      alt="Mobile & Tablet" title="Mobile & Tablet"></a>
                            </div>
                            <div class="content">
                                <h2 class="item-title"><a href="shop-left-sidebar.html">Mobile &amp; Tablet</a></h2>
                                <ul class="item-children">
                                    <li><a href="shop-left-sidebar.html">iPad 2020</a></li>
                                    <li><a href="shop-left-sidebar.html">Tablet</a></li>
                                    <li><a href="shop-left-sidebar.html">Phone 2021</a></li>
                                    <li><a href="shop-left-sidebar.html">Mobile 2021</a></li>
                                </ul>
                                <div class="item-btn"><a href="shop-left-sidebar.html"
                                                         class="btn btn--small btn-secondary">View more</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End Top Categories-->

        <!--Collection Box slider-->
        <div class="collection-banners style1 section">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-6 col-lg-6 banner-item">
                        <div class="imgBanner-grid-item">
                            <div class="img">
                                <a href="shop-left-sidebar.html" class="collection-grid-item__link">
                                    <img data-src="assets/images/collection-banner/demo1-cl-banner5.jpg"
                                         src="assets/images/collection-banner/demo1-cl-banner5.jpg"
                                         alt="Take Your Design To The Next Level" class="blur-up lazyload"/>
                                </a>
                            </div>
                            <div class="details center w-50">
                                <div class="inner">
                                    <h3 class="title">Take Your Design To The Next Level</h3>
                                    <a href="shop-left-sidebar.html" class="btn">Shop Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-6 col-lg-6 banner-item">
                        <div class="imgBanner-grid-item">
                            <div class="img">
                                <a href="shop-left-sidebar.html" class="collection-grid-item__link">
                                    <img class="blur-up lazyload"
                                         data-src="assets/images/collection-banner/demo1-cl-banner6.jpg"
                                         src="assets/images/collection-banner/demo1-cl-banner6.jpg"
                                         alt="The Most Customizable eCommerce HTML Template"/>
                                </a>
                            </div>
                            <div class="details center w-50">
                                <div class="inner">
                                    <h3 class="title">The Most Customizable eCommerce HTML Template</h3>
                                    <a href="shop-left-sidebar.html" class="btn">Shop Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End Collection Box slider-->

        <!--Weekly Bestselling-->
        <div class="section product-slider no-pt-section">
            <div class="container">
                <div class="section-header style1 d-flex align-items-center align-content-center justify-content-between">
                    <div class="section-header-left">
                        <h2>Weekly Bestselling</h2>
                        <p>A large set of beautiful & fully flexible homepage layouts lets you create your website
                            quickly & easily.</p>
                    </div>
                    <div class="section-header-right">
                        <a href="shop-left-sidebar.html" class="btn btn-large">View More</a>
                    </div>
                </div>
                <div class="grid-products">
                    <div class="row">
                        <div class="item col-lg-4 col-md-4 col-6">
                            <!-- start product image -->
                            <div class="product-image">
                                <!-- start product image -->
                                <a href="product-layout1.html" class="product-img">
                                    <!-- image -->
                                    <img class="primary blur-up lazyload"
                                         data-src="assets/images/product-images/elt-p-1.jpg"
                                         src="assets/images/product-images/elt-p-1.jpg" alt="" title="">
                                    <!-- End image -->
                                    <!-- Hover image -->
                                    <img class="hover blur-up lazyload"
                                         data-src="assets/images/product-images/elt-p-1-1.jpg"
                                         src="assets/images/product-images/elt-p-1-1.jpg" alt="" title="">
                                    <!-- End hover image -->
                                    <!-- product label -->
                                    <div class="product-labels"><span class="lbl on-sale">Sale</span></div>
                                    <!-- End product label -->
                                </a>
                                <!-- end product image -->

                                <!--Product Button-->
                                <div class="button-set style3">
                                    <ul>
                                        <li>
                                            <!--Quick View Button-->
                                            <a href="#quickview-popup" title="Quick View"
                                               class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                               data-bs-target="#quickview_popup">
                                                <i class="icon an an-expand-arrows-alt"></i>
                                                <span class="tooltip-label">Quick View</span>
                                            </a>
                                            <!--End Quick View Button-->
                                        </li>
                                        <li>
                                            <!--Wishlist Button-->
                                            <div class="wishlist-btn">
                                                <a class="btn-icon wishlist add-to-wishlist" href="my-wishlist.html">
                                                    <i class="icon an an-heart-o"></i>
                                                    <span class="tooltip-label">Add To Wishlist</span>
                                                </a>
                                            </div>
                                            <!--End Wishlist Button-->
                                        </li>
                                        <li>
                                            <!--Compare Button-->
                                            <div class="compare-btn">
                                                <a class="btn-icon compare add-to-compare" href="compare-style2.html"
                                                   title="Add to Compare">
                                                    <i class="icon an an-balance-scale"></i>
                                                    <span class="tooltip-label">Add to Compare</span>
                                                </a>
                                            </div>
                                            <!--End Compare Button-->
                                        </li>
                                    </ul>
                                </div>
                                <!--End Product Button-->
                            </div>
                            <!-- end product image -->
                            <!--start product details -->
                            <div class="product-details text-left">
                                <!--Brand Name-->
                                <div class="brand-name">Camera</div>
                                <!--End Brand Name-->
                                <!-- product name -->
                                <div class="product-name">
                                    <a href="product-layout1.html">Camera (A100) 20 MP Point & Shoot Camera</a>
                                </div>
                                <!-- End product name -->
                                <!-- product price -->
                                <div class="product-price">
                                    <span class="old-price">$499.00</span>
                                    <span class="price">$400.00</span>
                                </div>
                                <!-- End product price -->
                                <!--Product Review-->
                                <div class="product-review">
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <span class="review-label"><a href="#;"> 5 reviews</a></span>
                                </div>
                                <!--End Product Review-->
                                <!--Color Variant -->
                                <ul class="swatches">
                                    <li class="swatch small navy"><span class="tooltip-label">Navy</span></li>
                                    <li class="swatch small green"><span class="tooltip-label">Green</span></li>
                                    <li class="swatch small gray"><span class="tooltip-label">Gray</span></li>
                                    <li class="swatch small aqua"><span class="tooltip-label">Aqua</span></li>
                                    <li class="swatch small orange"><span class="tooltip-label">Orange</span></li>
                                </ul>
                                <!-- End Variant -->
                                <!--Cart Button-->
                                <a href="#pro-addtocart-popup" title="Add to Cart" class="btn-icon btn btn-addto-cart"
                                   data-bs-toggle="modal" data-bs-target="#pro-addtocart-popup">
                                    <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                </a>
                                <!--end Cart Button-->
                            </div>
                            <!-- End product details -->
                        </div>
                        <div class="item col-lg-4 col-md-4 col-6">
                            <!-- start product image -->
                            <div class="product-image">
                                <!-- start product image -->
                                <a href="product-layout1.html" class="product-img">
                                    <!-- image -->
                                    <img class="primary blur-up lazyload"
                                         data-src="assets/images/product-images/elt-p-2.jpg"
                                         src="assets/images/product-images/elt-p-2.jpg" alt="" title="">
                                    <!-- End image -->
                                    <!-- Hover image -->
                                    <img class="hover blur-up lazyload"
                                         data-src="assets/images/product-images/elt-p-2-1.jpg"
                                         src="assets/images/product-images/elt-p-2-1.jpg" alt="" title="">
                                    <!-- End hover image -->
                                </a>
                                <!-- end product image -->

                                <!--Countdown Timer-->
                                <div class="saleTime desktop" data-countdown="2030/03/01"></div>
                                <!--End Countdown Timer-->

                                <!--Product Button-->
                                <div class="button-set style3">
                                    <ul>
                                        <li>
                                            <!--Quick View Button-->
                                            <a href="#quickview-popup" title="Quick View"
                                               class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                               data-bs-target="#quickview_popup">
                                                <i class="icon an an-expand-arrows-alt"></i>
                                                <span class="tooltip-label">Quick View</span>
                                            </a>
                                            <!--End Quick View Button-->
                                        </li>
                                        <li>
                                            <!--Wishlist Button-->
                                            <div class="wishlist-btn">
                                                <a class="btn-icon wishlist add-to-wishlist" href="my-wishlist.html">
                                                    <i class="icon an an-heart-o"></i>
                                                    <span class="tooltip-label">Add To Wishlist</span>
                                                </a>
                                            </div>
                                            <!--End Wishlist Button-->
                                        </li>
                                        <li>
                                            <!--Compare Button-->
                                            <div class="compare-btn">
                                                <a class="btn-icon compare add-to-compare" href="compare-style2.html"
                                                   title="Add to Compare">
                                                    <i class="icon an an-balance-scale"></i>
                                                    <span class="tooltip-label">Add to Compare</span>
                                                </a>
                                            </div>
                                            <!--End Compare Button-->
                                        </li>
                                    </ul>
                                </div>
                                <!--End Product Button-->
                            </div>
                            <!-- end product image -->
                            <!--start product details -->
                            <div class="product-details text-left">
                                <!--Brand Name-->
                                <div class="brand-name">Camera</div>
                                <!--End Brand Name-->
                                <!-- product name -->
                                <div class="product-name">
                                    <a href="product-layout1.html">Fully Automatic Washing Machine</a>
                                </div>
                                <!-- End product name -->
                                <!-- product price -->
                                <div class="product-price">
                                    <span class="price">$600.00</span>
                                </div>
                                <!-- End product price -->
                                <!--Product Review-->
                                <div class="product-review">
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star gray-star"></i>
                                    <span class="review-label"><a href="#;"> 2 reviews</a></span>
                                </div>
                                <!--End Product Review-->
                                <!-- Color Variant -->
                                <ul class="swatches">
                                    <li class="swatch small black"><span class="tooltip-label">Black</span></li>
                                    <li class="swatch small navy"><span class="tooltip-label">Navy</span></li>
                                    <li class="swatch small purple"><span class="tooltip-label">Purple</span></li>
                                </ul>
                                <!-- End Variant -->
                                <!--Cart Button-->
                                <a href="#pro-addtocart-popup" title="Add to Cart" class="btn-icon btn btn-addto-cart"
                                   data-bs-toggle="modal" data-bs-target="#pro-addtocart-popup">
                                    <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                </a>
                                <!--end Cart Button-->
                            </div>
                            <!-- End product details -->
                        </div>
                        <div class="item col-lg-4 col-md-4 col-6">
                            <!-- start product image -->
                            <div class="product-image">
                                <!-- start product image -->
                                <a href="product-layout1.html" class="product-img">
                                    <!-- image -->
                                    <img class="primary blur-up lazyload"
                                         data-src="assets/images/product-images/elt-p-6.jpg"
                                         src="assets/images/product-images/elt-p-6.jpg" alt="" title="">
                                    <!-- End image -->
                                    <!-- Hover image -->
                                    <img class="hover blur-up lazyload"
                                         data-src="assets/images/product-images/elt-p-6-1.jpg"
                                         src="assets/images/product-images/elt-p-6-1.jpg" alt="" title="">
                                    <!-- End hover image -->
                                </a>
                                <!-- end product image -->
                                <!--Product label-->
                                <div class="product-labels"><span class="lbl pr-label2">Hot</span></div>
                                <!--Product label-->
                                <!--Product Button-->
                                <div class="button-set style3">
                                    <ul>
                                        <li>
                                            <!--Quick View Button-->
                                            <a href="#quickview-popup" title="Quick View"
                                               class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                               data-bs-target="#quickview_popup">
                                                <i class="icon an an-expand-arrows-alt"></i>
                                                <span class="tooltip-label">Quick View</span>
                                            </a>
                                            <!--End Quick View Button-->
                                        </li>
                                        <li>
                                            <!--Wishlist Button-->
                                            <div class="wishlist-btn">
                                                <a class="btn-icon wishlist add-to-wishlist" href="my-wishlist.html">
                                                    <i class="icon an an-heart-o"></i>
                                                    <span class="tooltip-label">Add To Wishlist</span>
                                                </a>
                                            </div>
                                            <!--End Wishlist Button-->
                                        </li>
                                        <li>
                                            <!--Compare Button-->
                                            <div class="compare-btn">
                                                <a class="btn-icon compare add-to-compare" href="compare-style2.html"
                                                   title="Add to Compare">
                                                    <i class="icon an an-balance-scale"></i>
                                                    <span class="tooltip-label">Add to Compare</span>
                                                </a>
                                            </div>
                                            <!--End Compare Button-->
                                        </li>
                                    </ul>
                                </div>
                                <!--End Product Button-->
                            </div>
                            <!-- end product image -->
                            <!--start product details -->
                            <div class="product-details text-left">
                                <!--Brand Name-->
                                <div class="brand-name">Camera</div>
                                <!--End Brand Name-->
                                <!-- product name -->
                                <div class="product-name">
                                    <a href="product-layout1.html">Alpha ILCE-6000L 24.3 MP Mirrorless</a>
                                </div>
                                <!-- End product name -->
                                <!-- product price -->
                                <div class="product-price">
                                    <span class="old-price">$349.00</span>
                                    <span class="price">$299.00</span>
                                </div>
                                <!-- End product price -->
                                <!--Product Review-->
                                <div class="product-review">
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star gray-star"></i>
                                    <span class="review-label"><a href="#;"> 5 reviews</a></span>
                                </div>
                                <!--End Product Review-->
                                <!-- Color Variant -->
                                <ul class="swatches">
                                    <li class="swatch small gray"><span class="tooltip-label">gray</span></li>
                                    <li class="swatch small red"><span class="tooltip-label">red</span></li>
                                    <li class="swatch small orange"><span class="tooltip-label">orange</span></li>
                                    <li class="swatch small yellow"><span class="tooltip-label">yellow</span></li>
                                </ul>
                                <!-- End Variant -->
                                <!--Cart Button-->
                                <a href="#pro-addtocart-popup" title="Add to Cart" class="btn-icon btn btn-addto-cart"
                                   data-bs-toggle="modal" data-bs-target="#pro-addtocart-popup">
                                    <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                </a>
                                <!--end Cart Button-->
                            </div>
                            <!-- End product details -->
                        </div>
                        <div class="item col-lg-4 col-md-4 col-6">
                            <!-- start product image -->
                            <div class="product-image">
                                <!-- start product image -->
                                <a href="product-layout1.html" class="product-img">
                                    <!-- image -->
                                    <img class="primary blur-up lazyload"
                                         data-src="assets/images/product-images/elt-p-3.jpg"
                                         src="assets/images/product-images/elt-p-3.jpg" alt="" title="">
                                    <!-- End image -->
                                    <!-- Hover image -->
                                    <img class="hover blur-up lazyload"
                                         data-src="assets/images/product-images/elt-p-3-1.jpg"
                                         src="assets/images/product-images/elt-p-3-1.jpg" alt="" title="">
                                    <!-- End hover image -->
                                </a>
                                <!-- end product image -->
                                <!--Product label-->
                                <div class="product-labels"><span class="lbl pr-label1">New</span></div>
                                <!--Product label-->

                                <!--Product Button-->
                                <div class="button-set style3">
                                    <ul>
                                        <li>
                                            <!--Quick View Button-->
                                            <a href="#quickview-popup" title="Quick View"
                                               class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                               data-bs-target="#quickview_popup">
                                                <i class="icon an an-expand-arrows-alt"></i>
                                                <span class="tooltip-label">Quick View</span>
                                            </a>
                                            <!--End Quick View Button-->
                                        </li>
                                        <li>
                                            <!--Wishlist Button-->
                                            <div class="wishlist-btn">
                                                <a class="btn-icon wishlist add-to-wishlist" href="my-wishlist.html">
                                                    <i class="icon an an-heart-o"></i>
                                                    <span class="tooltip-label">Add To Wishlist</span>
                                                </a>
                                            </div>
                                            <!--End Wishlist Button-->
                                        </li>
                                        <li>
                                            <!--Compare Button-->
                                            <div class="compare-btn">
                                                <a class="btn-icon compare add-to-compare" href="compare-style2.html"
                                                   title="Add to Compare">
                                                    <i class="icon an an-balance-scale"></i>
                                                    <span class="tooltip-label">Add to Compare</span>
                                                </a>
                                            </div>
                                            <!--End Compare Button-->
                                        </li>
                                    </ul>
                                </div>
                                <!--End Product Button-->
                            </div>
                            <!-- end product image -->
                            <!--start product details -->
                            <div class="product-details text-left">
                                <!--Brand Name-->
                                <div class="brand-name">Game Station</div>
                                <!--End Brand Name-->
                                <!-- product name -->
                                <div class="product-name">
                                    <a href="product-layout1.html">Game Station 500 GB Gaming Console</a>
                                </div>
                                <!-- End product name -->
                                <!-- product price -->
                                <div class="product-price">
                                    <span class="price">$310.00</span>
                                </div>
                                <!-- End product price -->
                                <!--Product Review-->
                                <div class="product-review">
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <span class="review-label"><a href="#;"> 1 reviews</a></span>
                                </div>
                                <!--End Product Review-->
                                <!-- Color Variant -->
                                <ul class="swatches">
                                    <li class="swatch small red"><span class="tooltip-label">red</span></li>
                                    <li class="swatch small orange"><span class="tooltip-label">orange</span></li>
                                    <li class="swatch small yellow"><span class="tooltip-label">yellow</span></li>
                                </ul>
                                <!-- End Variant -->
                                <!--Cart Button-->
                                <a href="#pro-addtocart-popup" title="Add to Cart" class="btn-icon btn btn-addto-cart"
                                   data-bs-toggle="modal" data-bs-target="#pro-addtocart-popup">
                                    <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                </a>
                                <!--end Cart Button-->
                            </div>
                            <!-- End product details -->
                        </div>
                        <div class="item col-lg-4 col-md-4 col-6">
                            <!-- start product image -->
                            <div class="product-image">
                                <!-- start product image -->
                                <a href="product-layout1.html" class="product-img">
                                    <!-- image -->
                                    <img class="primary blur-up lazyload"
                                         data-src="assets/images/product-images/elt-p-4.jpg"
                                         src="assets/images/product-images/elt-p-4.jpg" alt="" title="">
                                    <!-- End image -->
                                    <!-- Hover image -->
                                    <img class="hover blur-up lazyload"
                                         data-src="assets/images/product-images/elt-p-4-1.jpg"
                                         src="assets/images/product-images/elt-p-4-1.jpg" alt="" title="">
                                    <!-- End hover image -->
                                </a>
                                <!-- end product image -->
                                <!--Product Button-->
                                <div class="button-set style3">
                                    <ul>
                                        <li>
                                            <!--Quick View Button-->
                                            <a href="#quickview-popup" title="Quick View"
                                               class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                               data-bs-target="#quickview_popup">
                                                <i class="icon an an-expand-arrows-alt"></i>
                                                <span class="tooltip-label">Quick View</span>
                                            </a>
                                            <!--End Quick View Button-->
                                        </li>
                                        <li>
                                            <!--Wishlist Button-->
                                            <div class="wishlist-btn">
                                                <a class="btn-icon wishlist add-to-wishlist" href="my-wishlist.html">
                                                    <i class="icon an an-heart-o"></i>
                                                    <span class="tooltip-label">Add To Wishlist</span>
                                                </a>
                                            </div>
                                            <!--End Wishlist Button-->
                                        </li>
                                        <li>
                                            <!--Compare Button-->
                                            <div class="compare-btn">
                                                <a class="btn-icon compare add-to-compare" href="compare-style2.html"
                                                   title="Add to Compare">
                                                    <i class="icon an an-balance-scale"></i>
                                                    <span class="tooltip-label">Add to Compare</span>
                                                </a>
                                            </div>
                                            <!--End Compare Button-->
                                        </li>
                                    </ul>
                                </div>
                                <!--End Product Button-->
                            </div>
                            <!-- end product image -->
                            <!--start product details -->
                            <div class="product-details text-left">
                                <!--Brand Name-->
                                <div class="brand-name">Shaver</div>
                                <!--End Brand Name-->
                                <!-- product name -->
                                <div class="product-name">
                                    <a href="product-layout1.html">Men Shaver &amp; Trimmer</a>
                                </div>
                                <!-- End product name -->
                                <!-- product price -->
                                <div class="product-price">
                                    <span class="price">$89.00</span>
                                </div>
                                <!-- End product price -->
                                <!--Product Review-->
                                <div class="product-review">
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star gray-star"></i>
                                    <span class="review-label"><a href="#;">4 Reviews</a></span>
                                </div>
                                <!--End Product Review-->
                                <!-- Color Variant -->
                                <ul class="swatches">
                                    <li class="swatch small gray"><span class="tooltip-label">gray</span></li>
                                    <li class="swatch small red"><span class="tooltip-label">red</span></li>
                                    <li class="swatch small orange"><span class="tooltip-label">orange</span></li>
                                    <li class="swatch small yellow"><span class="tooltip-label">yellow</span></li>
                                </ul>
                                <!-- End Variant -->
                                <!--Cart Button-->
                                <a href="#pro-addtocart-popup" title="Add to Cart" class="btn-icon btn btn-addto-cart"
                                   data-bs-toggle="modal" data-bs-target="#pro-addtocart-popup">
                                    <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                </a>
                                <!--end Cart Button-->
                            </div>
                            <!-- End product details -->
                        </div>
                        <div class="item col-lg-4 col-md-4 col-6">
                            <!-- start product image -->
                            <div class="product-image">
                                <!-- start product image -->
                                <a href="product-layout1.html" class="product-img">
                                    <!-- image -->
                                    <img class="primary blur-up lazyload"
                                         data-src="assets/images/product-images/elt-p-5.jpg"
                                         src="assets/images/product-images/elt-p-5.jpg" alt="" title="">
                                    <!-- End image -->
                                    <!-- Hover image -->
                                    <img class="hover blur-up lazyload"
                                         data-src="assets/images/product-images/elt-p-5-1.jpg"
                                         src="assets/images/product-images/elt-p-5-1.jpg" alt="" title="">
                                    <!-- End hover image -->
                                </a>
                                <!-- end product image -->

                                <!--Product Button-->
                                <div class="button-set style3">
                                    <ul>
                                        <li>
                                            <!--Quick View Button-->
                                            <a href="#quickview-popup" title="Quick View"
                                               class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                               data-bs-target="#quickview_popup">
                                                <i class="icon an an-expand-arrows-alt"></i>
                                                <span class="tooltip-label">Quick View</span>
                                            </a>
                                            <!--End Quick View Button-->
                                        </li>
                                        <li>
                                            <!--Wishlist Button-->
                                            <div class="wishlist-btn">
                                                <a class="btn-icon wishlist add-to-wishlist" href="my-wishlist.html">
                                                    <i class="icon an an-heart-o"></i>
                                                    <span class="tooltip-label">Add To Wishlist</span>
                                                </a>
                                            </div>
                                            <!--End Wishlist Button-->
                                        </li>
                                        <li>
                                            <!--Compare Button-->
                                            <div class="compare-btn">
                                                <a class="btn-icon compare add-to-compare" href="compare-style2.html"
                                                   title="Add to Compare">
                                                    <i class="icon an an-balance-scale"></i>
                                                    <span class="tooltip-label">Add to Compare</span>
                                                </a>
                                            </div>
                                            <!--End Compare Button-->
                                        </li>
                                    </ul>
                                </div>
                                <!--End Product Button-->
                            </div>
                            <!-- end product image -->
                            <!--start product details -->
                            <div class="product-details text-left">
                                <!--Brand Name-->
                                <div class="brand-name">Mobile</div>
                                <!--End Brand Name-->
                                <!-- product name -->
                                <div class="product-name">
                                    <a href="product-layout1.html">Mobile Galaxy S6 Edge</a>
                                </div>
                                <!-- End product name -->
                                <!-- product price -->
                                <div class="product-price">
                                    <span class="price">$699.00</span>
                                </div>
                                <!-- End product price -->
                                <!--Product Review-->
                                <div class="product-review">
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star gray-star"></i>
                                    <span class="review-label"><a href="#;"> 10 reviews</a></span>
                                </div>
                                <!--End Product Review-->
                                <!-- Color Variant -->
                                <ul class="swatches">
                                    <li class="swatch small black"><span class="tooltip-label">black</span></li>
                                    <li class="swatch small maroon"><span class="tooltip-label">maroon</span></li>
                                </ul>
                                <!-- End Variant -->
                                <!--Cart Button-->
                                <a href="#pro-addtocart-popup" title="Add to Cart" class="btn-icon btn btn-addto-cart"
                                   data-bs-toggle="modal" data-bs-target="#pro-addtocart-popup">
                                    <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                </a>
                                <!--end Cart Button-->
                            </div>
                            <!-- End product details -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End Weekly Bestselling-->

        <!--Parallax Deal Banner-->
        <div class="section parallax-banner-style-bg-fixed no-pt-section">
            <div class="hero hero--large hero__overlay bg-size">
                <img class="bg-img" src="assets/images/parallax-banner/demo1-parallax-img.jpg" alt="">
                <div class="hero__inner">
                    <div class="container">
                        <div class="wrap-text center text-small font-bold">
                            <span class="small-title">Hurry Up!</span>
                            <h2 class="mega-title">Super Deals During This Week</h2>
                            <!--Countdown Timer-->
                            <div class="saleTime" data-countdown="2030/03/01"></div>
                            <!--End Countdown Timer-->
                            <div class="mega-subtitle"><p>ShopLook is Perfect Multipurpose ecommerce Bootstrap5 HTML
                                template for any business. it has all features and modules to create your amazing
                                ecommerce website.</p></div>
                            <a href="shop-left-sidebar.html" class="btn border-btn-1 btn--large">Browse All Deal
                                Products</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End Parallax Deal Banner-->

        <!--Testimonial Slider-->
        <div class="section testimonial-slider no-pt-section">
            <div class="container">
                <div class="section-header style1 d-flex align-items-center align-content-center justify-content-between">
                    <div class="section-header-left">
                        <h2>WHAT THEY SAY ABOUT US</h2>
                        <p>Latest &amp; Special Our Best Sell Brands</p>
                    </div>
                    <div class="section-header-right">
                        <a href="shop-left-sidebar.html" class="btn btn-large">View More</a>
                    </div>
                </div>
                <div class="quote-wraper">
                    <!--Testimonial Slider Items-->
                    <div class="quotes-slider">
                        <div class="quotes-slide">
                            <blockquote class="quotes-slider__text text-center">
                                <div class="rte-setting"><p>The standard chunk of Lorem Ipsum used since the 1500s is
                                    reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus
                                    Bonorum.</p></div>
                                <div class="product-review">
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star gray-star"></i>
                                </div>
                                <div class="testimonial-image"><img src="assets/images/photo4.jpg" alt="Shetty Jamie"
                                                                    title="Shetty Jamie"/></div>
                                <p class="authour">Happy Customer,</p>
                                <p class="cmp-name">CPL</p>
                            </blockquote>
                        </div>
                        <div class="quotes-slide">
                            <blockquote class="quotes-slider__text text-center">
                                <div class="rte-setting"><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
                                    laboris nisi ut aliquip ex ea commodo consequat. The standard chunk of Lorem
                                    Ipsum.</p></div>
                                <div class="product-review">
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                </div>
                                <div class="testimonial-image"><img src="assets/images/photo3.jpg" alt="Shetty Jamie"
                                                                    title="Shetty Jamie"/></div>
                                <p class="authour">Shetty Jamie,</p>
                                <p class="cmp-name">Kollision</p>
                            </blockquote>
                        </div>
                        <div class="quotes-slide">
                            <blockquote class="quotes-slider__text text-center">
                                <div class="rte-setting"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                    Curabitur non mattis dui, sit amet hendrerit nibh. Duis congue volutpat urna ut
                                    accumsan. Vivam mauris...</p></div>
                                <div class="product-review">
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                </div>
                                <div class="testimonial-image"><img src="assets/images/photo2.jpg" alt="Sara Colinton"
                                                                    title="Sara Colinton"/></div>
                                <p class="authour">Sara Colinton,</p>
                                <p class="cmp-name">Pel</p>
                            </blockquote>
                        </div>
                        <div class="quotes-slide">
                            <blockquote class="quotes-slider__text text-center">
                                <div class="rte-setting"><p>Far exceeded expectations Lorem ipsum dolor sit amet,
                                    consectetur adipiscing elit. Curabitur non mattis dui, sit amet hendrerit nibh. Duis
                                    congue volutpat urna ut accumsan....</p></div>
                                <div class="product-review">
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star"></i>
                                    <i class="an an-star gray-star"></i>
                                </div>
                                <div class="testimonial-image"><img src="assets/images/photo1.jpg" alt="Hamlet Tuong"
                                                                    title="Hamlet Tuong"/></div>
                                <p class="authour">Hamlet Tuong,</p>
                                <p class="cmp-name">OPL</p>
                            </blockquote>
                        </div>
                    </div>
                    <!--Testimonial Slider Items-->
                </div>
            </div>
        </div>
        <!--End Testimonial Slider-->

        <!--Brand Logo Slider-->
        <div class="section logo-section no-pt-section">
            <div class="container">
                <div class="section-header style1 d-flex align-items-center align-content-center justify-content-between">
                    <div class="section-header-left">
                        <h2>THE POPULAR BRANDS</h2>
                        <p>Latest &amp; Special Our Best Sell Brands</p>
                    </div>
                    <div class="section-header-right">
                        <a href="shop-left-sidebar.html" class="btn btn-large">View More</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="logo-bar">
                            <div class="logo-bar__item">
                                <a href="#;"><img src="assets/images/logo/brandlogo1.png" alt="" title=""/></a>
                            </div>
                            <div class="logo-bar__item">
                                <a href="#;"><img src="assets/images/logo/brandlogo2.png" alt="" title=""/></a>
                            </div>
                            <div class="logo-bar__item">
                                <a href="#;"><img src="assets/images/logo/brandlogo3.png" alt="" title=""/></a>
                            </div>
                            <div class="logo-bar__item">
                                <a href="#;"><img src="assets/images/logo/brandlogo4.png" alt="" title=""/></a>
                            </div>
                            <div class="logo-bar__item">
                                <a href="#;"><img src="assets/images/logo/brandlogo5.png" alt="" title=""/></a>
                            </div>
                            <div class="logo-bar__item">
                                <a href="#;"><img src="assets/images/logo/brandlogo6.png" alt="" title=""/></a>
                            </div>
                            <div class="logo-bar__item">
                                <a href="#;"><img src="assets/images/logo/brandlogo7.png" alt="" title=""/></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End Brand Logo Slider-->

        <!--Blog Post-->
        <div class="section home-blog-post">
            <div class="container">
                <div class="section-header style1 d-flex align-items-center align-content-center justify-content-between">
                    <div class="section-header-left">
                        <h2>Fresh From Our Blog</h2>
                        <p>You are going to love this amazing HTML Template.</p>
                    </div>
                    <div class="section-header-right">
                        <a href="blog-left-sidebar.html" class="btn btn-large">View Blog</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="blog-post-slider">
                            <div class="blogpost-item">
                                <a href="blog-single-post.html" class="post-thumb">
                                    <img class="blur-up lazyload" src="assets/images/blog/post-img1.jpg"
                                         data-src="assets/images/blog/post-img1.jpg" alt="" title=""/>
                                </a>
                                <div class="post-detail">
                                    <h3 class="post-title"><a href="blog-single-post.html">Our development is your
                                        success</a></h3>
                                    <ul class="publish-detail">
                                        <li><span class="article__date">June 06, 2022</span></li>
                                        <li><i class="an an-comments"></i> <a href="blog-single-post.html">1 comment</a>
                                        </li>
                                    </ul>
                                    <p class="post-excerpt">In mattis scelerisque magna, ut tincidunt ex. Quisque nibh
                                        urna, pretium in tristique in, bibendum sed libero. Pellentesque mauris nunc,
                                        pretium non erat non,...</p>
                                    <a href="blog-single-post.html" class="btn btn--small btn-secondary">Read More</a>
                                </div>
                            </div>
                            <div class="blogpost-item">
                                <a href="blog-single-post.html" class="post-thumb">
                                    <img class="blur-up lazyload" src="assets/images/blog/post-img2.jpg"
                                         data-src="assets/images/blog/post-img2.jpg" alt="" title=""/>
                                </a>
                                <div class="post-detail">
                                    <h3 class="post-title"><a href="blog-single-post.html">Ensuring Customer Success</a>
                                    </h3>
                                    <ul class="publish-detail">
                                        <li><span class="article__date">July 11, 2022</span></li>
                                    </ul>
                                    <p class="post-excerpt">In mattis scelerisque magna, ut tincidunt ex. Quisque nibh
                                        urna, pretium in tristique in, bibendum sed libero. Pellentesque mauris nunc,
                                        pretium non erat non,...</p>
                                    <a href="blog-single-post.html" class="btn btn--small btn-secondary">Read More</a>
                                </div>
                            </div>
                            <div class="blogpost-item">
                                <a href="blog-single-post.html" class="post-thumb">
                                    <img class="blur-up lazyload" src="assets/images/blog/post-img3.jpg"
                                         data-src="assets/images/blog/post-img3.jpg" alt="" title=""/>
                                </a>
                                <div class="post-detail">
                                    <h3 class="post-title"><a href="blog-single-post.html">We can make your business
                                        shine!</a></h3>
                                    <ul class="publish-detail">
                                        <li><span class="article__date">August 19, 2022</span></li>
                                        <li><i class="an an-comments"></i> <a href="blog-single-post.html">2
                                            comments</a></li>
                                    </ul>
                                    <p class="post-excerpt">In mattis scelerisque magna, ut tincidunt ex. Quisque nibh
                                        urna, pretium in tristique in, bibendum sed libero. Pellentesque mauris nunc,
                                        pretium non erat non,...</p>
                                    <a href="blog-single-post.html" class="btn btn--small btn-secondary">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End Blog Post-->

        <!--Store Feature-->
        <div class="store-features">
            <div class="container">
                <div class="row store-info">
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                        <i class="an an-truck"></i>
                        <h5>Free Shipping &amp; Return</h5>
                        <p class="sub-text">Free shipping on all US orders</p>
                    </div>
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                        <i class="an an-money-bill-wave"></i>
                        <h5>Money Back Guarantee</h5>
                        <p class="sub-text">30 days money back guarantee</p>
                    </div>
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                        <i class="an an-headphones"></i>
                        <h5>Support 24/7</h5>
                        <p class="sub-text">Contact us 24 hours a day</p>
                    </div>
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                        <i class="an an-shield-alt"></i>
                        <h5>Payment Secure</h5>
                        <p class="sub-text">We ensure secure payment</p>
                    </div>
                </div>
            </div>
        </div>
        <!--End Store Feature-->

    </div>
    <!--End Page Content-->

    <!--Footer-->
    <div class="footer footer-1">
        <div class="footer-top clearfix">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 about-us-col">
                        <img src="assets/images/logo-white.png" alt="ShopLook"/>
                        <p>55 Gallaxy Enque, 2568 steet,<br>23568 NY</p>
                        <p><b>Phone</b>: (440) 000 000 0000</p>
                        <p><b>Email</b>: <a href="mailto:sales@yousite.com">sales@yousite.com</a></p>
                        <ul class="list--inline social-icons">
                            <li><a href="#"><i class="icon an an-facebook-f"></i></a></li>
                            <li><a href="#"><i class="icon an an-twitter"></i></a></li>
                            <li><a href="#"><i class="icon an an-pinterest-p"></i></a></li>
                            <li><a href="#"><i class="icon an an-instagram"></i></a></li>
                            <li><a href="#"><i class="icon an an-youtube"></i></a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 footer-links">
                        <h4 class="h4">Quick Shop</h4>
                        <ul>
                            <li><a href="#">Home Appliances</a></li>
                            <li><a href="#">Phones &amp; Tablet</a></li>
                            <li><a href="#">Audio &amp; Video</a></li>
                            <li><a href="#">Digital Cameras</a></li>
                            <li><a href="#">Accessories</a></li>
                            <li><a href="#">Computer &amp; Laptop</a></li>
                            <li><a href="#">Game &amp; Video</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 footer-links">
                        <h4 class="h4">Informations</h4>
                        <ul>
                            <li><a href="login.html">Login</a></li>
                            <li><a href="my-account.html">My Account</a></li>
                            <li><a href="#">View Cart</a></li>
                            <li><a href="#">Privacy policy</a></li>
                            <li><a href="#">Shipping &amp; Returns</a></li>
                            <li><a href="#">Terms &amp; condition</a></li>
                            <li><a href="#">404 Page</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 footer-links">
                        <h4 class="h4">Customer Services</h4>
                        <ul>
                            <li><a href="blog-left-sidebar.html">Blog</a></li>
                            <li><a href="aboutus-style1.html">About us</a></li>
                            <li><a href="faqs-style1.html">FAQ's</a></li>
                            <li><a href="contact-style1.html">Contact Us</a></li>
                            <li><a href="#">Orders and Returns</a></li>
                            <li><a href="#">Track My Order</a></li>
                            <li><a href="#">Support Center</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 newsletter-col">
                        <div class="display-table">
                            <div class="display-table-cell footer-newsletter">
                                <form action="#" method="post">
                                    <label class="h4">Sign Up To Our Newsletter</label>
                                    <p>Enter your email to receive daily news and get 20% off coupon for all items.</p>
                                    <div class="input-group">
                                        <input type="email" class="input-group__field newsletter-input" name="EMAIL"
                                               value="" placeholder="Email Your address" required>
                                        <span class="input-group__btn">
                                                    <button type="submit" class="btn btn-secondary newsletter__submit"
                                                            name="commit" id="Subscribe"><span
                                                            class="newsletter__submit-text--large">Subscribe</span></button>
                                                </span>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom clearfix">
            <div class="container">
                <ul class="payment-icons list--inline">
                    <li><i class="an an-cc-visa" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-mastercard" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-amex" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-paypal" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-discover" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-stripe" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-jcb" aria-hidden="true"></i></li>
                </ul>
                <div class="copytext">
                    &copy; 2022 ShopLook. All Rights By <a href="http://www.bootstrapMB.com">bootstrapMB</a>.
                </div>
            </div>
        </div>
    </div>
    <!--End Footer-->

    <!--Scoll Top-->
    <span id="site-scroll"><i class="icon an an-arrow-up"></i></span>
    <!--End Scoll Top-->

    <!--MiniCart Drawer-->
    <div class="minicart-right-drawer modal right fade" id="minicart-drawer">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div id="cart-drawer" class="block block-cart">
                    <a href="javascript:void(0);" class="close-cart" data-bs-dismiss="modal" aria-label="Close"><i
                            class="an an-times"></i></a>
                    <h4>Your cart (3 Items)</h4>
                    <div class="minicart-content">
                        <ul class="clearfix">
                            <li class="item clearfix">
                                <a class="product-image" href="#">
                                    <img src="assets/images/product-images/cart-page-img1.jpg"
                                         data-src="assets/images/product-images/cart-page-img1.jpg" alt="" title="">
                                </a>
                                <div class="product-details">
                                    <a href="#" class="remove"><i class="an an-times" aria-hidden="true"></i></a>
                                    <a href="#" class="edit-i remove"><i class="icon an an-edit" aria-hidden="true"></i></a>
                                    <a class="product-title" href="cart-style1.html">Acer NX.MVMSI.035 Intel Core i3
                                        15.6 inches Laptop</a>
                                    <div class="variant-cart">Black / XL</div>
                                    <div class="wrapQtyBtn">
                                        <div class="qtyField">
                                            <a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus"
                                                                                                  aria-hidden="true"></i></a>
                                            <input type="text" name="quantity" value="1" class="qty">
                                            <a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus"
                                                                                                 aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="priceRow">
                                        <div class="product-price">
                                            <span class="money">$59.00</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="item clearfix">
                                <a class="product-image" href="#">
                                    <img src="assets/images/product-images/cart-page-img2.jpg"
                                         data-src="assets/images/product-images/cart-page-img2.jpg" alt="" title="">
                                </a>
                                <div class="product-details">
                                    <a href="#" class="remove"><i class="an an-times" aria-hidden="true"></i></a>
                                    <a href="#" class="edit-i remove"><i class="icon an an-edit" aria-hidden="true"></i></a>
                                    <a class="product-title" href="cart-style1.html">Canon CSG-QX10 Full Shot Lens</a>
                                    <div class="variant-cart">Red / S</div>
                                    <div class="wrapQtyBtn">
                                        <div class="qtyField">
                                            <a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus"
                                                                                                  aria-hidden="true"></i></a>
                                            <input type="text" name="quantity" value="1" class="qty">
                                            <a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus"
                                                                                                 aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="priceRow">
                                        <div class="product-price">
                                            <span class="money">$89.00</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="item clearfix">
                                <a class="product-image" href="#">
                                    <img src="assets/images/product-images/elt-p-18-1.jpg"
                                         data-src="assets/images/product-images/elt-p-18-1.jpg" alt="" title="">
                                </a>
                                <div class="product-details">
                                    <a href="#" class="remove"><i class="an an-times" aria-hidden="true"></i></a>
                                    <a href="#" class="edit-i remove"><i class="icon an an-edit" aria-hidden="true"></i></a>
                                    <a class="product-title" href="cart-style1.html">Fully Automatic Washing Machine</a>
                                    <div class="wrapQtyBtn">
                                        <div class="qtyField">
                                            <a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus"
                                                                                                  aria-hidden="true"></i></a>
                                            <input type="text" name="quantity" value="1" class="qty">
                                            <a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus"
                                                                                                 aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="priceRow">
                                        <div class="product-price">
                                            <span class="money">$1189.00</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="minicart-bottom">
                        <div class="subtotal list">
                            <span>Shipping:</span>
                            <span class="product-price">$10.00</span>
                        </div>
                        <div class="subtotal list">
                            <span>Tax:</span>
                            <span class="product-price">$05.00</span>
                        </div>
                        <div class="subtotal">
                            <span>Total:</span>
                            <span class="product-price">$93.13</span>
                        </div>
                        <div class="row mt-3 mb-3">
                            <div class="col-12 col-sm-12 col-md-6 col-lg-6 pr-0">
                                <a href="checkout-style2.html" class="btn proceed-to-checkout">Go to Checkout</a>
                            </div>
                            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                                <a href="cart-style1.html" class="btn btn-secondary cart-btn">View Cart</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End MiniCart Drawer-->

    <!-- Quickview Modal -->
    <div class="modal fade" id="quickview_popup" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 col-sm-6 col-md-6 col-lg-6">
                            <div id="slider">
                                <!-- model thumbnail -->
                                <div id="quickView" class="carousel slide">
                                    <div class="quickview-in">
                                        <!-- image slide carousel items -->
                                        <div class="carousel-inner">
                                            <!-- slide 1 -->
                                            <div class="item carousel-item active" data-bs-slide-number="0">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-15.jpg"
                                                     src="assets/images/product-images/elt-p-15.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 1 -->
                                            <!-- slide 2 -->
                                            <div class="item carousel-item" data-bs-slide-number="1">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-15-1.jpg"
                                                     src="assets/images/product-images/elt-p-15-1.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 2 -->
                                            <!-- slide 3 -->
                                            <div class="item carousel-item" data-bs-slide-number="2">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-9.jpg"
                                                     src="assets/images/product-images/elt-p-9.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 3 -->
                                            <!-- slide 4 -->
                                            <div class="item carousel-item" data-bs-slide-number="3">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-8.jpg"
                                                     src="assets/images/product-images/elt-p-8.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 4 -->
                                            <!-- slide 5 -->
                                            <div class="item carousel-item" data-bs-slide-number="4">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-14.jpg"
                                                     src="assets/images/product-images/elt-p-14.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 5 -->
                                            <!-- slide 6 -->
                                            <div class="item carousel-item" data-bs-slide-number="5">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-14-1.jpg"
                                                     src="assets/images/product-images/elt-p-14-1.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 6 -->
                                        </div>
                                        <!-- End image slide carousel items -->
                                        <!-- arrow button -->
                                        <div class="np-btns">
                                            <a class="carousel-control left" href="#quickView"
                                               data-bs-target="#quickView" data-bs-slide="prev"><i
                                                    class="an an-angle-left"></i></a>
                                            <a class="carousel-control right" href="#quickView"
                                               data-bs-target="#quickView" data-bs-slide="next"><i
                                                    class="an an-angle-right"></i></a>
                                        </div>
                                        <!-- End arrow button -->
                                    </div>
                                    <!-- model thumbnail image -->
                                    <div class="model-thumbnail-img">
                                        <!-- model thumbnail slide -->
                                        <ul class="carousel-indicators list-inline">
                                            <!-- slide 1 -->
                                            <li class="list-inline-item active">
                                                <a id="carousel-selector-0" class="selected" data-bs-slide-to="0"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-15.jpg"
                                                         src="assets/images/product-images/elt-p-15.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 1 -->
                                            <!-- slide 2 -->
                                            <li class="list-inline-item">
                                                <a id="carousel-selector-1" data-bs-slide-to="1"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-15-1.jpg"
                                                         src="assets/images/product-images/elt-p-15-1.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 2 -->
                                            <!-- slide 3 -->
                                            <li class="list-inline-item">
                                                <a id="carousel-selector-2" data-bs-slide-to="2"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-9.jpg"
                                                         src="assets/images/product-images/elt-p-9.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 3 -->
                                            <!-- slide 4 -->
                                            <li class="list-inline-item">
                                                <a id="carousel-selector-3" data-bs-slide-to="3"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-8.jpg"
                                                         src="assets/images/product-images/elt-p-8.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 4 -->
                                            <!-- slide 5 -->
                                            <li class="list-inline-item">
                                                <a id="carousel-selector-4" data-bs-slide-to="4"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-14.jpg"
                                                         src="assets/images/product-images/elt-p-14.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 5 -->
                                            <!-- slide 6 -->
                                            <li class="list-inline-item">
                                                <a id="carousel-selector-5" data-bs-slide-to="5"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-14-1.jpg"
                                                         src="assets/images/product-images/elt-p-14-1.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 6 -->
                                        </ul>
                                        <!-- End model thumbnail slide -->
                                    </div>
                                    <!-- End model thumbnail image -->
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-6 col-lg-6">
                            <div class="product-brand"><a href="#">Charcoal</a></div>
                            <h2 class="product-title">Product Quick View Popup</h2>
                            <div class="product-review">
                                <div class="rating">
                                    <i class="an an-star"></i><i class="an an-star"></i><i class="an an-star"></i><i
                                        class="an an-star"></i><i class="an an-star"></i>
                                </div>
                                <div class="reviews"><a href="#">5 Reviews</a></div>
                            </div>
                            <div class="product-info">
                                <div class="product-stock"><span class="instock">In Stock</span> <span
                                        class="outstock hide">Unavailable</span></div>
                                <div class="product-sku">SKU: <span class="variant-sku">19115-rdxs</span></div>
                            </div>
                            <div class="pricebox">
                                <span class="price old-price">$900.00</span>
                                <span class="price">$800.00</span>
                            </div>
                            <div class="sort-description">Shoplook Multipurpose Bootstrap 5 Html Template that will give
                                you and your customers a smooth shopping experience which can be used for various kinds
                                of stores such as fashion..
                            </div>
                            <form method="post" action="#" id="product_form--option" class="product-form">
                                <div class="product-options">
                                    <div class="swatch clearfix swatch-0 option1">
                                        <div class="product-form__item">
                                            <label class="label">Color:<span class="required">*</span> <span
                                                    class="slVariant">Red</span></label>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-black" type="radio"
                                                       name="option-0" value="Black">
                                                <label class="swatchLbl small black" for="swatch-black"
                                                       title="Black"></label>
                                            </div>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-blue" type="radio" name="option-0"
                                                       value="blue">
                                                <label class="swatchLbl small blue" for="swatch-blue"
                                                       title="Blue"></label>
                                            </div>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-red" type="radio" name="option-0"
                                                       value="Blue">
                                                <label class="swatchLbl small red" for="swatch-red" title="Red"></label>
                                            </div>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-pink" type="radio" name="option-0"
                                                       value="Pink">
                                                <label class="swatchLbl color small pink" for="swatch-pink"
                                                       title="Pink"></label>
                                            </div>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-orange" type="radio"
                                                       name="option-0" value="Orange">
                                                <label class="swatchLbl color small orange" for="swatch-orange"
                                                       title="Orange"></label>
                                            </div>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-yellow" type="radio"
                                                       name="option-0" value="Yellow">
                                                <label class="swatchLbl color small yellow" for="swatch-yellow"
                                                       title="Yellow"></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swatch clearfix swatch-1 option2">
                                        <div class="product-form__item">
                                            <label class="label">Size:<span class="required">*</span> <span
                                                    class="slVariant">XS</span></label>
                                            <div class="swatch-element xs">
                                                <input class="swatchInput" id="swatch-1-xs" type="radio" name="option-1"
                                                       value="XS">
                                                <label class="swatchLbl medium" for="swatch-1-xs" title="XS">XS</label>
                                            </div>
                                            <div class="swatch-element s">
                                                <input class="swatchInput" id="swatch-1-s1" type="radio" name="option-1"
                                                       value="S">
                                                <label class="swatchLbl medium" for="swatch-1-s1" title="S">S</label>
                                            </div>
                                            <div class="swatch-element m">
                                                <input class="swatchInput" id="swatch-1-m" type="radio" name="option-1"
                                                       value="M">
                                                <label class="swatchLbl medium" for="swatch-1-m" title="M">M</label>
                                            </div>
                                            <div class="swatch-element l">
                                                <input class="swatchInput" id="swatch-1-l" type="radio" name="option-1"
                                                       value="L">
                                                <label class="swatchLbl medium" for="swatch-1-l" title="L">L</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-action clearfix">
                                        <div class="quantity">
                                            <div class="wrapQtyBtn">
                                                <div class="qtyField">
                                                    <a class="qtyBtn minus" href="javascript:void(0);"><i
                                                            class="an an-minus" aria-hidden="true"></i></a>
                                                    <input type="text" id="quantityp" name="quantity" value="1"
                                                           class="product-form__input qty">
                                                    <a class="qtyBtn plus" href="javascript:void(0);"><i
                                                            class="an an-plus" aria-hidden="true"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="add-to-cart">
                                            <button type="button" class="btn button-cart">
                                                <span>Add to cart</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <div class="wishlist-btn">
                                <a class="wishlist add-to-wishlist" href="#" title="Add to Wishlist"><i
                                        class="icon an an-heart-o" aria-hidden="true"></i> <span>Add to Wishlist</span></a>
                                <a class="wishlist add-to-compare ms-2" href="#" title="Add to Wishlist"><i
                                        class="icon an an-balance-scale" aria-hidden="true"></i>
                                    <span>Add to Compare</span></a>
                            </div>
                            <div class="share-icon">
                                <span>Share:</span>
                                <ul class="list--inline social-icons">
                                    <li><a href="#"><i class="icon an an-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="icon an an-twitter"></i></a></li>
                                    <li><a href="#"><i class="icon an an-pinterest-p"></i></a></li>
                                    <li><a href="#"><i class="icon an an-instagram"></i></a></li>
                                    <li><a href="#"><i class="icon an an-youtube"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End Quickview Modal-->

    <!--Newsletter Popup-->
    <div id="newsletter-modal" class="style2 mfp-with-anim mfp-hide">
        <div class="newsltr-tbl">
            <div class="newsltr-img small--hide"><img src="assets/images/newsletter/newsletter_540.jpg"
                                                      data-src="assets/images/newsletter/newsletter_540.jpg" alt=""
                                                      class="blur-up lazyload"></div>

            <div class="newsltr-text text-left">
                <div class="wraptext">
                    <h2>Join Our Mailing List</h2>
                    <p class="sub-text">Stay Informed! Monthly Tips, Tracks and Discount. </p>
                    <form action="#" class="mcNewsletter" method="post">
                        <div class="input-group">
                            <input type="email" class="newsletter__input" name="EMAIL" value=""
                                   placeholder="Enter email address" required>
                            <span class="">
                                        <button type="submit" class="btn mcNsBtn"
                                                name="commit"><span>Subscribe</span></button>
                                    </span>
                        </div>
                    </form>
                    <ul class="list--inline social-icons">
                        <li><a class="si-link" href="#" title="Facebook"><i class="an an-facebook-f"
                                                                            aria-hidden="true"></i></a></li>
                        <li><a class="si-link" href="#" title="Twitter"><i class="an an-twitter" aria-hidden="true"></i></a>
                        </li>
                        <li><a class="si-link" href="#" title="Pinterest"><i class="an an-pinterest-p"
                                                                             aria-hidden="true"></i></a></li>
                        <li><a class="si-link" href="#" title="Instagram"><i class="an an-instagram"
                                                                             aria-hidden="true"></i></a></li>
                    </ul>
                    <p class="checkboxlink">
                        <input type="checkbox" id="dontshow">
                        <label for="dontshow">Don't show this popup again</label>
                    </p>
                </div>
            </div>
        </div>
        <button title="Close (Esc)" type="button" class="mfp-close">×</button>
    </div>
    <!--End Newsletter Popup-->

    <!--Product Promotion Popup-->
    <div class="product-notification" id="dismiss">
        <span class="close" aria-hidden="true"><i class="an an-times"></i></span>
        <div class="media d-flex">
            <img class="mr-2 blur-up lazyload" data-src="assets/images/product-images/95x120.jpg"
                 src="assets/images/product-images/95x120.jpg" alt="Generic placeholder image"/>
            <div class="media-body">
                <span class="mt-0 mb-1 title">Someone purchsed a</span>
                <h3 class="pname"><a href="product-layout1.html">Mobile Galaxy S6 Edge</a></h3>
                <p class="detail">14 Minutes ago from New York, USA</p>
            </div>
        </div>
    </div>
    <!--End Product Promotion Popup-->

    <!-- Start Addtocart Added Popup -->
    <div class="modal fade" id="pro-addtocart-popup" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="addtocart-inner text-center clearfix">
                                <h4 class="title">Added to your shopping cart successfully.</h4>
                                <div class="pro-img mb-2">
                                    <img class="img-fluid blur-up lazyload"
                                         src="assets/images/product-images/addtocart-popup-img.jpg"
                                         data-src="assets/images/product-images/addtocart-popup-img.jpg"
                                         alt="Added to your shopping cart successfully."
                                         title="Added to your shopping cart successfully."/>
                                </div>
                                <div class="pro-details">
                                    <p class="pro-name mb-1">Mobile Galaxy S6 Edge</p>
                                    <p class="sku mb-0">Color: Gray</p>
                                    <p class="mb-0 qty-total">1 X $113.88</p>
                                    <div class="addcart-total mt-3 mb-3">
                                        Total: <b class="price">$113.88</b>
                                    </div>
                                    <div class="button-action">
                                        <a href="checkout-style1.html" class="btn btn-primary view-cart mx-1">Go To
                                            Checkout</a>
                                        <a href="index.html" class="btn btn-secondary">Continue Shopping</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Addtocart Added Popup -->

    <!-- Including Jquery -->
    <script th:src="@{/assets/js/vendor/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/assets/js/vendor/js.cookie.js}"></script>
    <!--Including Javascript-->
    <script th:src="@{/assets/js/plugins.js}"></script>
    <script th:src="@{/assets/js/main.js}"></script>

    <!--Newsletter Popup Cookies-->
    <script>
        function newsletter_popup() {
            var cookieSignup = "cookieSignup", date = new Date();
            if ($.cookie(cookieSignup) != 'true' && window.location.href.indexOf("challenge#newsletter-modal") <= -1) {
                setTimeout(function () {
                        $.magnificPopup.open({
                                items: {
                                    src: '#newsletter-modal'
                                }
                                , type: 'inline', removalDelay: 300, mainClass: 'mfp-zoom-in'
                            }
                        );
                    }
                    , 5000);
            }
            $.magnificPopup.instance.close = function () {
                if ($("#dontshow").prop("checked") == true) {
                    $.cookie(cookieSignup, 'true', {
                            expires: 1, path: '/'
                        }
                    );
                }
                $.magnificPopup.proto.close.call(this);
            }
        }

        //newsletter_popup();
    </script>
    <!--End Newsletter Popup Cookies-->

</div>
<!--End Page Wrapper-->

</body>
</html>
